frontend-svelte

Svelte 5 introduces runes—$state, $derived, and $effect—for declaring reactive variables and computed values without manual dependency tracking. Use $state to create reactive state, $derived for computed properties that update automatically, and $effect for side effects. These replace older reactive declarations and integrate directly into your component logic.

SvelteKit uses file-based routing with +page.svelte for routes and +layout.svelte for shared layouts. Organize load functions in +page.server.js for data fetching and server actions for form handling. This convention-over-configuration approach separates concerns: pages handle UI, layouts manage structure, and load functions manage data flow.

Use Svelte stores for shared state accessible across routes and components. Create writable or derived stores, then subscribe or access them with the $ prefix in components. For complex state, stores provide a lightweight alternative to external libraries while maintaining reactivity across your application.

Yes, Svelte 5 runes are designed for SvelteKit 5 development and integrate seamlessly with existing SvelteKit patterns. Migrate incrementally by adopting $state, $derived, and $effect in new components while maintaining older reactive syntax in existing code until you're ready to refactor.

Use server actions in +page.server.js to process form submissions securely. Define actions as exported functions that receive form data, validate it, and return success or error responses. SvelteKit automatically handles the POST request and re-renders your page with updated data or validation messages.

load functions in +page.server.js run on the server before rendering, ideal for sensitive data and database queries. Client-side load functions run in the browser for lighter logic. Server loads protect secrets, improve performance by avoiding client-side queries, and ensure data consistency before rendering.