Page options (SSR, CSR, prerender) in Svelte - Mini Project: Build & Apply

Understanding Page Options: SSR, CSR, and Prerender in Svelte

📖 Scenario: You are building a simple Svelte app that shows a greeting message. You want to learn how to control when and how the page content is generated: on the server before sending to the browser (SSR), only in the browser after loading (CSR), or pre-built at build time (prerender).

🎯 Goal: Create a Svelte page that displays a greeting message. Configure the page to use server-side rendering (SSR), client-side rendering (CSR), and prerendering in separate steps to see how each option works.

📋 What You'll Learn

Create a Svelte page with a greeting message variable

Add a configuration variable to control rendering mode

Use the configuration to enable SSR, CSR, or prerender

Complete the page with the correct export to apply the chosen option

💡 Why This Matters

🌍 Real World

Web developers often need to decide how their pages are rendered to optimize speed and user experience. Understanding SSR, CSR, and prerendering helps build fast and accessible websites.

💼 Career

Knowing how to configure page rendering modes in frameworks like Svelte is valuable for frontend developers working on modern web applications.

1

DATA SETUP: Create a greeting message variable

Create a let variable called greeting with the value 'Hello from Svelte!' inside a Svelte component.

Svelte

  
    // Your code here
  

  {greeting}

Hint

Use let greeting = 'Hello from Svelte!'; inside the <script> tag.

2

CONFIGURATION: Add a rendering mode variable

Add a const variable called renderMode and set it to the string 'ssr' inside the <script> tag.

Svelte

  
    let greeting = 'Hello from Svelte!';
    // Your code here
  

  {greeting}

Hint

Use const renderMode = 'ssr'; to set the rendering mode.

3

CORE LOGIC: Use the rendering mode to configure the page

Add an export const ssr statement that is true if renderMode equals 'ssr', otherwise false. Use a simple comparison inside the <script> tag.

Svelte

  
    let greeting = 'Hello from Svelte!';
    const renderMode = 'ssr';
    // Your code here
  

  {greeting}

Hint

Use export const ssr = renderMode === 'ssr'; to control SSR.

4

COMPLETION: Add prerender export for static generation

Add export const prerender = true; below the ssr export inside the <script> tag to enable prerendering.

Svelte

  
    let greeting = 'Hello from Svelte!';
    const renderMode = 'ssr';
    export const ssr = renderMode === 'ssr';
    // Your code here
  

  {greeting}

Hint

Use export const prerender = true; to enable prerendering.