Page options (SSR, CSR, prerender) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output when using csr: true in a SvelteKit page?

Consider a SvelteKit page configured with export const csr = true; and export const ssr = false;. What will the user see when they first load the page?

Svelte

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

<script>
  let count = 0;
</script>

<button on:click={() => count++} aria-label="Increment count">Count: {count}</button>

A The page initially shows a blank screen until JavaScript loads, then the button appears and is interactive.

B The page shows an error because SSR is disabled but CSR is enabled.

C The page shows the button with count 0 immediately and clicking updates the count without delay.

D The page shows the button with count 0 immediately from the server, but clicking does not update the count.

💡 Hint

Think about what happens when server-side rendering is turned off but client-side rendering is on.

With ssr = false and csr = true, the server sends almost no HTML. The page is blank until the JavaScript loads and renders the component on the client. Then the button appears and is interactive.

📝 Syntax

intermediate

Which code snippet correctly disables SSR and enables prerendering in a SvelteKit page?

Choose the correct way to disable server-side rendering and enable prerendering for a SvelteKit page.

A

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

B

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

C

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

D

export const ssr = false;
export const csr = false;

💡 Hint

Remember that ssr controls server rendering and prerender controls static generation.

To disable SSR, set ssr = false. To enable prerendering, set prerender = true. This combination disables server rendering but still generates static HTML at build time.

❓ state_output

advanced

What is the value of data when using prerender with a load function fetching static data?

Given this SvelteKit page with prerender enabled and a load function returning static data, what will data.message be when the page renders?

Svelte

export const prerender = true;

export async function load() {
  return { message: 'Hello from prerender!' };
}

<script>
  export let data;
</script>

<p>{data.message}</p>

A "Hello from prerender!" is displayed immediately as static HTML.

B "Hello from prerender!" appears only after client JavaScript runs.

C The page shows an empty paragraph because prerender disables load functions.

D The page throws an error because prerender cannot use async load functions.

💡 Hint

Prerendering generates static HTML at build time including load data.

With prerender = true, the load function runs at build time. Its returned data is included in the static HTML. So the message appears immediately without waiting for JavaScript.

🔧 Debug

advanced

Why does this SvelteKit page fail to prerender?

This page has export const prerender = true; but build fails with an error about fetch. What is the likely cause?

Svelte

export const prerender = true;

export async function load({ fetch }) {
  const res = await fetch('/api/data');
  const data = await res.json();
  return { data };
}

<script>
  export let data;
</script>

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

A The page is missing <code>ssr = false</code>, so prerender cannot work.

B The fetch call to a relative API path fails during prerender because the server is not running.

C Prerender does not support async load functions, causing the error.

D The <code>data</code> variable is not exported correctly, causing a runtime error.

💡 Hint

Think about what happens when prerender tries to fetch data from an API endpoint during build.

During prerender, the build process runs without a running server. Fetching from a relative API path like /api/data fails because the endpoint is not available. This causes the build error.

🧠 Conceptual

expert

Which combination of page options produces a fully static HTML page with no client-side JavaScript?

In SvelteKit, you want a page that is fully static: rendered at build time, no JavaScript sent to the browser, and no client-side interactivity. Which combination of options achieves this?

A <code>export const prerender = true;</code> and <code>export const ssr = false;</code> and <code>export const csr = true;</code>

B <code>export const prerender = true;</code> and <code>export const ssr = true;</code> and <code>export const csr = true;</code>

C <code>export const prerender = false;</code> and <code>export const ssr = true;</code> and <code>export const csr = false;</code>

D <code>export const prerender = true;</code> and <code>export const csr = false;</code> and <code>export const ssr = true;</code>

💡 Hint

Consider what each option controls: prerendering, server rendering, and client rendering.

Setting prerender = true generates static HTML at build time. Setting csr = false disables client-side JavaScript. Keeping ssr = true allows server-side rendering at build time. This combination produces a fully static page with no client JS.

Practice

1. What does SSR (Server-Side Rendering) do in a Svelte page?

easy

A. It sends fully rendered HTML from the server to the browser.

B. It renders the page only after JavaScript loads in the browser.

C. It builds static pages ahead of time during the build process.

D. It disables JavaScript on the page for faster loading.

Solution

1. Step 1: Understand SSR concept

   SSR means the server prepares the full HTML before sending it to the browser.

2. Step 2: Compare with other options

   CSR waits for JavaScript to render, prerender builds static pages ahead, and disabling JavaScript is unrelated.

3. Final Answer:

   It sends fully rendered HTML from the server to the browser. -> Option A

4. Quick Check:

   SSR = server sends ready HTML [OK]

Hint: SSR means server sends ready HTML, not browser rendering [OK]

Common Mistakes:

• Confusing SSR with CSR
• Thinking prerender is the same as SSR
• Believing SSR disables JavaScript

2. Which of the following is the correct way to disable SSR for a Svelte page?

easy

A. export const csr = true;

B. export const prerender = false;

C. export const ssr = false;

D. export const ssr = true;

Solution

1. Step 1: Recall syntax to disable SSR

   In Svelte, setting export const ssr = false; disables server-side rendering.

2. Step 2: Check other options

   prerender controls static generation, csr is not a valid option, and ssr = true enables SSR.

3. Final Answer:

   export const ssr = false; -> Option C

4. Quick Check:

   Disable SSR with ssr = false [OK]

Hint: Use 'export const ssr = false;' to disable SSR [OK]

Common Mistakes:

• Using 'prerender = false' to disable SSR
• Trying to set 'csr = true' which is invalid
• Confusing enabling and disabling SSR

3. Given this Svelte page code:

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

What will happen when this page is built and served?

medium

A. The page is statically generated at build time and rendered only on the client.

B. The page is server-rendered on each request and not prerendered.

C. The page is neither prerendered nor server-rendered, causing an error.

D. The page is prerendered and server-rendered on every request.

Solution

1. Step 1: Analyze prerender and ssr flags

   Setting prerender = true means the page is built as a static HTML file ahead of time. Setting ssr = false disables server-side rendering on requests.

2. Step 2: Understand combined effect

   The page is generated once at build time (prerendered) and then served as static HTML. Since SSR is off, no server rendering happens on requests; rendering happens on the client.

3. Final Answer:

   The page is statically generated at build time and rendered only on the client. -> Option A

4. Quick Check:

   prerender true + ssr false = static build + client render [OK]

Hint: prerender true + ssr false means static build + client render [OK]

Common Mistakes:

• Thinking SSR still runs on requests
• Assuming no rendering happens causing error
• Confusing prerender with SSR

4. You want a Svelte page to be fully static and load instantly without server rendering. You write:

export const ssr = false;
export const prerender = false;

What is the problem with this setup?

medium

A. The page will be server-rendered but not prerendered, causing slow loads.

B. The page will not prerender and also disables SSR, so it won't generate HTML before client loads.

C. The page will cause a syntax error because both options cannot be false.

D. The page will prerender but still use SSR, causing duplicate rendering.

Solution

1. Step 1: Understand the effect of both flags false

   Setting ssr = false disables server-side rendering, and prerender = false disables static generation.

2. Step 2: Identify the consequence

   Without SSR or prerender, the page has no prebuilt HTML and relies on client-side rendering only, causing a blank page until JavaScript runs.

3. Final Answer:

   The page will not prerender and also disables SSR, so it won't generate HTML before client loads. -> Option B

4. Quick Check:

   ssr false + prerender false = no prebuilt HTML [OK]

Hint: Both ssr and prerender false means no prebuilt HTML [OK]

Common Mistakes:

• Assuming prerender happens automatically
• Thinking this causes syntax error
• Believing SSR still runs when false

5. You want a Svelte page that:
- Is prerendered as static HTML for fast loading
- Uses SSR only if the user is logged in
- Otherwise, renders on the client

Which setup best achieves this behavior?

hard

A. export const prerender = false;
export const ssr = false;
// Fully client-side rendering only

B. export const prerender = false;
export const ssr = true;
// Server renders always regardless of login

C. export const prerender = true;
export const ssr = false;
// Use client-side code to check login and fetch data

D. export const prerender = true;
export const ssr = true;
// Use server hooks to check login and render accordingly

Solution

1. Step 1: Understand prerender and SSR roles

   Prerender true builds static HTML at build time. SSR true enables server rendering on requests.

2. Step 2: Match requirements

   To prerender for fast loading and also use SSR conditionally (like checking login), you need both prerender and SSR enabled. Server hooks can check login and decide rendering.

3. Step 3: Evaluate other options

   export const prerender = true; export const ssr = false; // Use client-side code to check login and fetch data disables SSR, so no server rendering on login. export const prerender = false; export const ssr = true; // Server renders always regardless of login disables prerender, losing static HTML. export const prerender = false; export const ssr = false; // Fully client-side rendering only disables both, no server or static rendering.

4. Final Answer:

   export const prerender = true; export const ssr = true; // Use server hooks to check login and render accordingly -> Option D

5. Quick Check:

   Prerender + SSR true for static + conditional server render [OK]

Hint: Enable both prerender and SSR for static plus conditional server render [OK]

Common Mistakes:

• Disabling SSR when conditional server render is needed
• Disabling prerender losing static HTML benefits
• Assuming client code can replace server login checks