Page options (SSR, CSR, prerender) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to disable server-side rendering for this Svelte page.

Svelte

<script context="module">
  export const ssr = [1];
</script>

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using true instead of false does not disable SSR.

Using null or undefined does not disable SSR.

Setting ssr = false disables server-side rendering, making the page render only on the client.

2fill in blank

medium

Complete the code to enable client-side rendering for this Svelte page.

Svelte

<script context="module">
  export const csr = [1];
</script>

Drag options to blanks, or click blank then click option'

Anull

Btrue

Cfalse

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Setting csr to false disables client-side rendering.

Using null or undefined does not enable CSR.

Setting csr = true ensures the page renders on the client side.

3fill in blank

hard

Fix the error in the code to prerender this Svelte page.

Svelte

<script context="module">
  export const prerender = [1];
</script>

Drag options to blanks, or click blank then click option'

A"true"

Bfalse

Cnull

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using "true" as a string causes errors.

Setting prerender to false disables prerendering.

Prerendering is enabled by setting prerender = true as a boolean, not a string.

4fill in blank

hard

Fill both blanks to disable SSR and enable CSR for this Svelte page.

Svelte

<script context="module">
  export const ssr = [1];
  export const csr = [2];
</script>

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up true and false values.

Using null or undefined instead of booleans.

Disabling SSR with ssr = false and enabling CSR with csr = true makes the page render only on the client.

5fill in blank

hard

Fill all three blanks to enable prerendering, disable SSR, and enable CSR in this Svelte page.

Svelte

<script context="module">
  export const prerender = [1];
  export const ssr = [2];
  export const csr = [3];
</script>

Drag options to blanks, or click blank then click option'

Afalse

Btrue

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing true and false values.

Using strings instead of booleans.

Set prerender = true to prerender the page, ssr = false to disable server rendering, and csr = true to enable client rendering.