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.