How does SSR (Server-Side Rendering) work in SvelteKit?

Answer

SvelteKit renders pages on the server by default for the initial page load. The process: 1. Load function: SvelteKit calls the page's load function (in +page.server.js or +page.js) on the server to fetch data. 2. Render: SvelteKit renders the Svelte component tree to an HTML string using the loaded data. 3. Hydration: the HTML is sent to the browser with embedded JavaScript. The browser renders the HTML immediately (fast FCP) then "hydrates" — attaches JavaScript to make the page interactive. Subsequent navigations: SvelteKit intercepts link clicks and fetches only the JSON data from load functions, then renders the new page client-side (SPA navigation). Configure rendering per page: export const ssr = false; disables SSR for that page (CSR only). export const prerender = true; generates static HTML at build time. export const csr = false; disables JavaScript entirely (pure HTML).