sveltekit-data-flow

spences10's avatarfrom spences10

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

⭐107stars🔀8forks📁View on GitHub🕐Updated Jan 1, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill provides expert guidance on SvelteKit data flow architecture, helping developers master the complexities of load functions, form actions, and state management. It streamlines the decision-making process between server-only and universal data fetching while ensuring best practices for serialization and error handling within the SvelteKit ecosystem.

Use Cases

  • Optimizing Data Fetching Strategy: Deciding whether to use +page.server.ts for sensitive database access or +page.ts for universal client-side APIs.
  • Implementing Robust Form Actions: Creating secure server-side handlers for form submissions, including proper validation feedback with fail() and navigation with redirect().
  • Debugging Serialization Errors: Identifying and resolving issues when attempting to pass non-serializable data (like class instances or functions) from the server to the client.
  • Standardizing Application Flow: Implementing consistent patterns for error handling and redirects to improve code maintainability and user experience.
namesveltekit-data-flow
# IMPORTANTKeep description on ONE line for Claude Code compatibility
descriptionSvelteKit data flow guidance. Use for load functions, form actions, and server/client data. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error().

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

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