Sveltekit Data Flow

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');
	},
};

Reference Files

• load-functions.md - Server vs

universal

• form-actions.md - Form handling

patterns

• serialization.md - What can/can't

serialize

• error-redirect-handling.md -

fail/redirect/error

Notes

• Server load → universal load via data param | ALWAYS

throw redirect()/error()

• No class instances/functions from server load (not serializable)
• Last verified: 2025-01-11

<!--

PROGRESSIVE DISCLOSURE GUIDELINES:

• Keep this file ~50 lines total (max ~150 lines)
• Use 1-2 code blocks only (recommend 1)
• Keep description <200 chars for Level 1 efficiency
• Move detailed docs to references/ for Level 3 loading
• This is Level 2 - quick reference ONLY, not a manual

LLM WORKFLOW (when editing this file):

• Write/edit SKILL.md
• Format (if formatter available)
• Run: claude-skills-cli validate <path>
• If multi-line description warning: run claude-skills-cli doctor <path>
• Validate again to confirm

-->