Rendering Modes, Reactivity & Adapters

Reactive Statements

<script>
  let count = 0;
  $: doubled = count * 2;        // re-runs whenever count changes
  $: console.log('count is', count);
</script>

<button on:click={() => count++}>{count} (doubled: {doubled})</button>

$: labels have the compiler analyze dependencies at build time and regenerate targeted update code — less boilerplate than React's dependency-array useEffect.

Per-Route Rendering Strategy

// marketing page — static HTML at build time
export const prerender = true;

// dashboard — fresh data every request
export const ssr = true;
export const prerender = false;

Prerendering (SSG) generates HTML once at build time — no per-request server work, ideal for content that doesn't change per-request. SSR generates fresh HTML every request. Configurable per-route, so a marketing page, a dashboard, and a highly interactive tool can each use the strategy that fits.

Form Actions & Progressive Enhancement

// +page.server.js
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    // ...save to DB
  },
};

Works as a plain HTML form POST first — resilient to JS failing to load — then SvelteKit optionally enhances it client-side (no full reload) when JS is available.

hooks.server.js & Adapters

hooks.server.js's handle() runs on every request — auth checks, logging — similar to Express middleware. Adapters transform the build output for a specific target (Vercel, Netlify, Node, static) — swap the adapter, deploy the same codebase elsewhere.