Page options (SSR, CSR, prerender) in Svelte - Step-by-Step Execution

Concept Flow - Page options (SSR, CSR, prerender)

Page Request

↓

SSR

↓

Render HTML

↓

Send to Browser

↓

User Sees Page

When a page is requested, SvelteKit checks its setup to decide how to render: Server-Side Rendering (SSR), Client-Side Rendering (CSR), or Prerendering. Then it sends the HTML to the browser accordingly.

Execution Sample

Svelte

export const ssr = true;
export const csr = false;
export const prerender = false;

This code sets the page to render only on the server (SSR), disables client-side rendering (CSR), and disables prerendering.

Execution Table

Step	Page Option Checked	Value	Action Taken	Resulting Output
1	ssr	true	Render page HTML on server	HTML generated on server
2	csr	false	No client-side JS hydration	Static HTML sent
3	prerender	false	No prerendering at build time	Page rendered on demand
4	Request complete	-	-	Browser receives server-rendered HTML

💡 All options checked; page rendered on server without client JS or prerendering.

Variable Tracker

Variable	Initial	After Step 1	After Step 2	After Step 3	Final
ssr	undefined	true	true	true	true
csr	undefined	undefined	false	false	false
prerender	undefined	undefined	undefined	false	false

Key Moments - 3 Insights

Why does setting csr to false mean no client-side JavaScript runs?

Because csr=false disables client-side hydration, so the browser only gets static HTML without interactive JS. See execution_table step 2.

What happens if prerender is true but ssr is false?

Prerendering generates static HTML at build time, so the page is served as static files without server rendering on each request.

Can a page have both SSR and CSR enabled?

Yes, ssr=true and csr=true means the page is server-rendered initially and then hydrated on the client for interactivity.

Visual Quiz - 3 Questions

Look at the execution_table, what is the action taken when ssr is true?

A Render page HTML on server

B Disable server rendering

C Generate static files at build time

D Run client-side JavaScript only

💡 Hint

Check execution_table row 1 under 'Action Taken'

At which step does the system decide not to run client-side JavaScript?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table step 2 and the 'csr' variable effect

If prerender is set to true, how would the output change?

A Page HTML is generated at build time and served as static files

B Page is rendered only on client side

C Page is never rendered

D Page is rendered on server on every request

💡 Hint

Refer to key_moments explanation about prerender true

Concept Snapshot

Page options in SvelteKit control how pages render:
- ssr=true: Render on server on each request
- csr=true: Enable client-side JavaScript hydration
- prerender=true: Generate static HTML at build time
Combine these to optimize performance and interactivity.

Full Transcript

When a user requests a page in SvelteKit, the system checks the page options: ssr, csr, and prerender. If ssr is true, the page HTML is generated on the server for each request. If csr is true, client-side JavaScript runs to hydrate the page for interactivity. If prerender is true, the page is built as static HTML at build time and served as static files. These options control when and where the page renders, balancing speed and interactivity. For example, setting ssr true and csr false means the page is server-rendered but static on the client. Setting prerender true means the page is pre-built and served without server rendering on each request.