sveltekit-data-flow

Data flow in SvelteKit uses load functions and form actions to move data securely between server and client. Use +page.server.ts for server-only operations like database access, and +page.ts for universal code. Form actions handle submissions with fail(), redirect(), and error() for validation and navigation.

+page.server.ts runs only on the server and accesses secrets and databases safely. +page.ts runs universally—on server during initial load and on client during navigation—and can use browser APIs. Choose +page.server.ts for sensitive data and +page.ts for client-accessible content.

Use fail() in form actions to return validation errors without redirecting. Pair it with error() for server failures and redirect() for successful submissions. This pattern keeps users on the form to correct input while preserving their data and providing clear feedback.

SvelteKit serializes JSON-compatible types: strings, numbers, booleans, arrays, and plain objects. Dates, functions, symbols, and circular references cause serialization errors. Check your load functions and form actions return only serializable types to prevent runtime failures.

Progressive enhancement in SvelteKit means forms work without JavaScript by using server-side form actions with fail() and redirect(). Client-side JavaScript enhances the experience by handling submissions without full-page reloads, while the server logic remains the source of truth.

Use redirect() in form actions after successful submissions like login or signup to navigate users to a new page (e.g., a dashboard). Redirect prevents form resubmission on refresh and signals completion. Keep redirect() for successful flows; use fail() for validation errors requiring correction.