Sveltekit Data Flow

spences10/svelte-skills-kit/plugins/svelte-skills/skills/sveltekit-data-flow

by spences102a9d88379bf62cee464a16db852edda7790a58f5No licenseListed Oct 9, 2026Updated Oct 9, 2026

SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().

Instructions onlySoftware Development

AI-generated overview

Guidance for SvelteKit data flow: load functions, form actions, serialization, and error or redirect handling.

What it does: This skill provides reference guidance on how data moves through a SvelteKit application. It explains when to use server-only versus universal load functions, how to write form actions, what values can be serialized, and how to use fail(), redirect(), error(), and invalidateAll(). It ships as instructions plus reference documents rather than runnable scripts.
When to use it: Use it when implementing or reviewing SvelteKit routes and you need to decide between +page.server.ts, +page.ts, and +server.ts. It also helps when handling form submissions, serialization limits, or client-side auth invalidation.
Requirements: No scripts or packages are required; it is instructions and reference documents only. The agent needs no credentials or network access.

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

typescript

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

// +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

Source and attribution

Source:spences10/svelte-skills-kitinplugins/svelte-skills/skills/sveltekit-data-flowat commit2a9d883

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Sveltekit Data Flow

SvelteKit Data Flow

Quick Start

Example

Reference Files

Notes

Source and attribution

More from spences10/svelte-skills-kit

Sveltekit Structure

Svelte Runes

Svelte Components

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices