Why Page options (SSR, CSR, prerender) in Svelte? - Purpose & Use Cases

The Big Idea

What if you could make every page load instantly without extra work?

The Scenario

Imagine building a website where every time a user visits a page, your server has to create the entire page from scratch, or the browser has to build it all alone without any help.

The Problem

Doing everything on the server can slow down responses and overload your server. Doing everything in the browser can make pages load slowly and hurt search engine rankings. Managing these manually is confusing and error-prone.

The Solution

Svelte lets you choose how each page is made: on the server (SSR), in the browser (CSR), or ahead of time (prerender). This makes your site faster, easier to build, and better for users and search engines.

Before vs After

✗ Before

fetch data on every request and build HTML manually on server

✓ After

export const prerender = true; // build page once at deploy time

export const ssr = false; // build page in browser only

What It Enables

You can create fast, user-friendly websites that load quickly and work well everywhere by picking the best way to build each page.

Real Life Example

A blog site can prerender all posts for instant loading, while a dashboard page uses SSR to show fresh data, and a settings page uses CSR for smooth user interactions.

Key Takeaways

Manual page building is slow and complex.

Svelte's page options let you pick the best rendering method.

This improves speed, user experience, and SEO.