## Pages ### routing SvelteKit uses filesystem-based routing with special `+` prefixed files for pages, layouts, API endpoints, and error handling. ## Filesystem routing Routes defined by `src/routes` directory structure. Files with `+` prefix are route files. ## Route file types - **+page.svelte**: Page component, receives `data` prop - **+page.js/+page.server.js**: Export `load()` function for data fetching - **+layout.svelte/+layout.js/+layout.server.js**: Persistent layout with `{@render children()}` - **+error.svelte**: Custom error page - **+server.js**: API endpoints, export HTTP handlers (`GET`, `POST`, etc.) ## Examples Page with data: ```js // +page.server.js export async function load({ params }) { return { title: 'Hello' }; } ``` API endpoint: ```js // +server.js export function GET({ url }) { return new Response(url.searchParams.get('value')); } ``` Layout: ```svelte {@render children()} ``` ### loading_data Load functions in +page.js/+page.server.js and +layout.js/+layout.server.js fetch data before rendering, with server-only and universal variants offering different capabilities and constraints. ## Load Functions Define in `+page.js`/`+page.server.js` or `+layout.js`/`+layout.server.js`. Return values available via `data` prop. **Server load** (`+page.server.js`): Runs only on server, access to cookies/locals/request, must return serializable data. **Universal load** (`+page.js`): Runs on server then browser, can return non-serializable data. ```js // +page.server.js export async function load({ params }) { return { post: await db.getPost(params.slug) }; } ``` ## Key Features - **URL data**: `url`, `route`, `params` available in load functions - **Fetch**: Use provided `fetch` (not native) - inherits cookies, allows relative URLs, caches responses - **Parent data**: `await parent()` to access parent layout data - **Errors**: `error(401, 'message')` to render `+error.svelte` - **Redirects**: `redirect(307, '/path')` to redirect users - **Streaming**: Return unresolved promises from server load to stream data as it resolves - **Dependency tracking**: Load functions rerun when `params`, `url`, or dependencies change - **Manual invalidation**: `invalidate(url)` or `invalidateAll()` to rerun load functions - **getRequestEvent**: Access current request in shared logic without passing event around ### form_actions Server-side form handling in SvelteKit using actions exported from +page.server.js, with support for validation, redirects, and progressive enhancement. ## Form Actions Export `actions` from `+page.server.js` to handle `POST` requests. Use `default` or named actions: ```js export const actions = { login: async ({ cookies, request }) => { const data = await request.formData(); // process and return { success: true } or fail(400, { error: true }) } }; ``` Invoke with `

` or `

Core Concepts