पाठ 22 / 25

Rendering Modes and Adapters

SSR, prerendering, CSR and deployment targets.

Page options and adapters

By default SvelteKit server-renders the first request and then hydrates into a client-side app for later navigations. Page options exported from +page.ts, +layout.ts or their server variants change this per route: export const prerender = true generates static HTML at build time (good for marketing pages and docs), export const ssr = false renders only in the browser (an SPA-style page), and export const csr = false ships no client JavaScript for that page. Options set in a layout apply to its children. Adapters turn the build into something a host can run: adapter-auto detects supported platforms, adapter-node produces a Node server, adapter-static outputs a fully static site (every page prerendered, or an SPA with a fallback page), and platform adapters exist for Vercel, Netlify and Cloudflare.

Render, deploy, test, check

Choose how each route renders, pick an adapter for your host, and test before you ship.

Four ideas: rendering modes and adapters, testing, performance, a final checklist.
Figure 8.1 — Rendering choice, adapter, tests, release.

Per-route options and a Node adapter

Mixing rendering modes.

// src/routes/(marketing)/+layout.ts  -> every marketing page is static HTML
export const prerender = true;

// src/routes/editor/+page.ts  -> heavy client-only editor
export const ssr = false;

// src/routes/legal/+page.ts  -> static text, no client JavaScript
export const prerender = true;
export const csr = false;

// svelte.config.js  -> run as a Node server (npm i -D @sveltejs/adapter-node)
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
  kit: { adapter: adapter({ out: 'build' }) }
};
// Build with: npm run build, then start with: node build

Prerendering needs crawlable pages

The prerenderer follows links from your entry pages; dynamic routes that are not linked anywhere need entries listed in config or an entries export. Check the docs for your version.

त्वरित जाँच: Which page option produces static HTML for a route at build time?

  • export const static = "yes"
  • export const ssr = false
  • export const csr = true
  • export const prerender = true
Answer

export const prerender = true — Prerendering happens during the build.