Page options (SSR, CSR, prerender) in Svelte

Introduction

Page options let you choose how your Svelte app loads and shows pages. This helps make your app faster and work better for users.

You want the page to load quickly with content ready on the server (SSR).

You want the page to load only in the browser after JavaScript runs (CSR).

You want to build pages ahead of time and serve them as static files (prerender).

Syntax

Svelte

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

Set ssr to true to enable server-side rendering.

Set csr to true to enable client-side rendering.

Examples

This page uses server-side rendering and client-side rendering but does not prerender.

Svelte

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

This page disables server-side rendering and only renders in the browser.

Svelte

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

This page prerenders at build time and disables client-side rendering.

Svelte

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

Sample Program

This Svelte page uses both server-side and client-side rendering. The page content is sent from the server, and the button works in the browser to update the count.

Svelte

<script>
  export const ssr = true;
  export const csr = true;
  export const prerender = false;

  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<h1>Counter</h1>
<p>Count: {count}</p>
<button on:click={increment} aria-label="Increment counter">Increment</button>

Important Notes

If you set ssr to false, the page will not render on the server and will show a blank page until JavaScript runs.

Prerendering creates static HTML files at build time, which is great for pages that do not change often.

Combining SSR and CSR lets you have fast initial load and interactive pages.

Summary

Page options control how and when pages render in Svelte.

SSR sends ready HTML from the server for faster load.

CSR renders pages in the browser after loading JavaScript.

Prerender builds static pages ahead of time for fast delivery.