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).
More Svelte / SvelteKit Questions
View all →- Intermediate What are Svelte custom stores and the store contract?
- Intermediate What are SvelteKit adapters?
- Intermediate What is the difference between prerendering, SSR, and CSR in SvelteKit?
- Intermediate How do you manage environment variables in SvelteKit?
- Intermediate What are Svelte actions (use:)?