Page options (SSR, CSR, prerender) in Svelte - Performance & Optimization

Performance: Page options (SSR, CSR, prerender)

HIGH IMPACT

This affects how fast the main content appears and how quickly users can interact with the page.

Rendering a page with dynamic data

Svelte

export const ssr = true;

<script context="module">
  export async function load() {
    const res = await fetch('/api/data');
    const data = await res.json();
    return { props: { data } };
  }
</script>

<script>
  export let data;
</script>

<main>{JSON.stringify(data)}</main>

Server renders page with data, so main content appears immediately, improving LCP and INP.

📈 Performance GainReduces LCP by 1-3 seconds and improves interactivity as content is ready on first paint.

Rendering a page with dynamic data

Svelte

export const ssr = false;

<script>
  import { onMount } from 'svelte';
  // fetch data on client only
  let data;
  onMount(async () => {
    const res = await fetch('/api/data');
    data = await res.json();
  });
</script>

<main>{data ? JSON.stringify(data) : 'Loading...'}</main>

Disables SSR causing blank page until client fetch completes, delaying LCP and increasing INP.

📉 Performance CostBlocks LCP until client JS loads and fetch completes, increasing time by 1-3 seconds on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
CSR only	Minimal initial DOM, built on client	Multiple reflows as content loads	High paint cost on load	[X] Bad
SSR	Full DOM sent from server	Single reflow on load	Lower paint cost	[OK] Good
Prerender	Static full DOM	Single reflow on load	Lowest paint cost	[OK] Good

Rendering Pipeline

SSR sends fully rendered HTML from server, CSR sends minimal HTML and renders on client, prerender sends static HTML built ahead. SSR and prerender reduce browser layout and paint delays by providing ready content.

→HTML Parsing

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages are delayed in CSR due to missing initial content.

Core Web Vital Affected

LCP, INP

This affects how fast the main content appears and how quickly users can interact with the page.

Optimization Tips

1Use SSR to deliver ready HTML for dynamic pages to improve LCP and INP.

2Use prerender for mostly static pages to serve fast-loading static HTML.

3Avoid disabling SSR unless you need full client control, as it delays content display.

Performance Quiz - 3 Questions

Which page option usually gives the fastest initial content display?

A Rendering only on user interaction

B Client-Side Rendering (CSR)

C Server-Side Rendering (SSR)

D No rendering at all

DevTools: Performance

How to check: Record page load, look for 'First Contentful Paint' and 'Time to Interactive' timings.

What to look for: Shorter LCP and INP times indicate good SSR or prerender usage; long delays suggest CSR bottlenecks.