# Rendering Modes and Adapters — Svelte / SvelteKit

Source: https://www.skillbyai.com/en/svelte/p-render

> 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.](assets/figures/svelte/section-8-map.svg) — Figure 8.1 — Rendering choice, adapter, tests, release.

## Per-route options and a Node adapter

Mixing rendering modes.

```javascript
// 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.

**Quiz:** Which page option produces static HTML for a route at build time?

- [ ] export const static = "yes"
- [ ] export const ssr = false
- [ ] export const csr = true
- [x] export const prerender = true

*Answer:* export const prerender = true. Prerendering happens during the build.