Sveltekit Data Flow

This is a quick reference for SvelteKit's data loading and form handling patterns. It covers the essential decision points: when to use +page.server.ts versus +page.ts, how to structure load functions, and the proper way to handle form actions with fail(), redirect(), and error(). The included example shows a typical server-side load with form action, and it links out to deeper references on serialization rules and invalidation patterns. It's lean by design, meant to be the cheat sheet you keep open while wiring up routes, not a full tutorial. Good for when you know SvelteKit basics but need to double check the data flow conventions.

skills.sh installs: 512
GitHub stars: 95
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add spences10/svelte-skills-kit --skill sveltekit-data-flow --agent claude-code

Installs into .claude/skills of the current project.

Files

SvelteKit Data Flow

Quick Start

Which file? Server-only (DB/secrets): +page.server.ts | Universal (runs both): +page.ts | API: +server.ts

Load decision: Need server resources? → server load | Need client APIs? → universal load

Form actions: Always +page.server.ts. Return fail() for errors, throw redirect() to navigate, throw error() for failures.

Example

// +page.server.ts
import { fail, redirect } from '@sveltejs/kit';

export const load = async ({ locals }) => {
	const user = await db.users.get(locals.userId);
	return { user }; // Must be JSON-serializable
};

export const actions = {
	default: async ({ request }) => {
		const data = await request.formData();
		const email = data.get('email');

		if (!email) return fail(400, { email, missing: true });

		await updateEmail(email);
		throw redirect(303, '/success');
	},
};