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.tsimport { 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 [blocked] - Server vs universal
• form-actions.md [blocked] - Form handling patterns
• serialization.md [blocked] - What can/can't serialize
• error-redirect-handling.md [blocked] - fail/redirect/error
• client-auth-invalidation.md [blocked] - invalidateAll() after client-side auth

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