Enabling SSR in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when SSR is enabled in Astro for this component?

Consider this Astro component that fetches data and renders it. SSR is enabled in the project.

---
const data = await fetch('https://api.example.com/items').then(res => res.json());
---

  {data.items.map(item => (
    <li>{item.name}</li>
  ))}

What will the user see when visiting this page?

Astro

---
const data = await fetch('https://api.example.com/items').then(res => res.json());
---
<ul>
  {data.items.map(item => (
    <li>{item.name}</li>
  ))}
</ul>

A A list of item names rendered directly in the HTML sent from the server.

B An empty list initially, then items appear after client-side JavaScript runs.

C A loading spinner that never disappears because data fetching is client-only.

D A syntax error because fetch cannot be used in Astro components.

💡 Hint

Think about when the data is fetched and how SSR works in Astro.

With SSR enabled, Astro fetches data on the server before sending HTML. So the list is fully rendered in the HTML.

📝 Syntax

intermediate

Which Astro config snippet correctly enables SSR?

You want to enable SSR in your Astro project. Which of these astro.config.mjs snippets is correct?

A

export default {
  mode: 'ssr'
};

B

export default {
  ssr: true
};

C

export default {
  output: 'server'
};

D

export default {
  render: 'server-side'
};

💡 Hint

Check Astro's official config option for SSR output.

Astro enables SSR by setting output: 'server' in the config file.

🔧 Debug

advanced

Why does this Astro SSR page fail with a runtime error?

This Astro page uses SSR and fetches data. But it crashes with ReferenceError: window is not defined. Why?

---
const data = await fetch('https://api.example.com/data').then(r => r.json());
const width = window.innerWidth;
---
Screen width: {width}

Astro

---
const data = await fetch('https://api.example.com/data').then(r => r.json());
const width = window.innerWidth;
---
<p>Screen width: {width}</p>

A Because innerWidth is a deprecated property and causes errors.

B Because fetch is not allowed in Astro SSR components.

C Because the data variable is not awaited properly.

D Because window is a browser object and does not exist during server-side rendering.

💡 Hint

Think about what runs on the server vs the browser.

During SSR, code runs on the server where window does not exist, causing the error.

❓ state_output

advanced

What is the rendered output of this Astro SSR component with client hydration?

This Astro component uses SSR and client hydration for interactivity.

---
import Counter from '../components/Counter.jsx';
---
Counter Example

The Counter component starts at 0 and increments on button click. What does the user see initially?

Astro

---
import Counter from '../components/Counter.jsx';
---
<h1>Counter Example</h1>
<Counter client:load />

A No button visible until JavaScript loads on the client.

B The counter button with label 'Count: 0' rendered in HTML and interactive after hydration.

C A static button labeled 'Count: 1' because SSR increments once.

D An error because client:load is not valid in Astro.

💡 Hint

Consider how SSR and client hydration work together in Astro.

SSR renders the initial HTML with the button showing 'Count: 0'. Client hydration makes it interactive.

🧠 Conceptual

expert

Which statement best describes enabling SSR in Astro?

Choose the most accurate description of what enabling SSR in Astro does.

A Enabling SSR makes Astro render pages on the server at request time, sending fully formed HTML to the browser.

B Enabling SSR disables all client-side JavaScript and makes pages static only.

C Enabling SSR means Astro components run only in the browser after page load.

D Enabling SSR automatically converts all components to React components.

💡 Hint

Think about what SSR means in web development.

SSR means server-side rendering: pages are built on the server and sent as complete HTML.

Practice

1. What does adding export const ssr = true; in an Astro component do?

easy

A. Turns off all rendering for the component

B. Disables client-side JavaScript for the component

C. Makes the component load only on the client

D. Enables server-side rendering for that component

Solution

1. Step 1: Understand the purpose of ssr in Astro

   Setting export const ssr = true; tells Astro to render the component on the server before sending it to the browser.

2. Step 2: Compare with other options

   The other options describe disabling or client-only behavior, which is not what ssr = true does.

3. Final Answer:

   Enables server-side rendering for that component -> Option D

4. Quick Check:

   SSR enabled = export const ssr = true [OK]

Hint: Remember: ssr=true means server renders HTML first [OK]

Common Mistakes:

• Thinking ssr disables JavaScript
• Confusing SSR with client-only rendering
• Assuming ssr=true stops rendering

2. Which of the following is the correct way to enable SSR in an Astro component?

easy

A. export const ssr = true;

B. export const ssr = false;

C. const ssr = true;

D. enableSSR(true);

Solution

1. Step 1: Identify correct syntax for SSR in Astro

   The correct syntax is to export a constant named ssr with value true to enable SSR.

2. Step 2: Check each option

   export const ssr = false; disables SSR. const ssr = true; misses export. enableSSR(true); is not valid Astro syntax.

3. Final Answer:

   export const ssr = true; -> Option A

4. Quick Check:

   Correct SSR syntax = export const ssr = true [OK]

Hint: Look for 'export const ssr = true;' exactly [OK]

Common Mistakes:

• Forgetting to export the ssr constant
• Using a function call instead of export
• Setting ssr to false by mistake

3. Given this Astro component code:

---
export const ssr = true;
const time = new Date().toISOString();
---
Current time: {time}

What will the user see when they load this page?

medium

A. The current time when the page was requested (fresh time)

B. The current time when the page was built (static time)

C. An error because ssr cannot be true

D. No time displayed because SSR disables variables

Solution

1. Step 1: Understand SSR effect on data

   With ssr = true, the page is rendered on the server at request time, so new Date() runs fresh each request.

2. Step 2: Compare options

   The current time when the page was built (static time) is static build time (no SSR). An error because ssr cannot be true is false; SSR=true is valid. No time displayed because SSR disables variables is incorrect; SSR does not disable variables.

3. Final Answer:

   The current time when the page was requested (fresh time) -> Option A

4. Quick Check:

   SSR renders fresh data on each request [OK]

Hint: SSR runs code fresh on server per request [OK]

Common Mistakes:

• Thinking SSR uses build time data
• Assuming SSR disables JavaScript variables
• Confusing SSR with static site generation

4. You wrote this Astro component:

---
ssr = true;
---
Hello world

Why does this cause an error?

medium

A. Because ssr must be a function, not a variable

B. Because ssr cannot be set to true

C. Because ssr must be exported with export const

D. Because ssr must be set inside the HTML, not script

Solution

1. Step 1: Check correct SSR syntax

   SSR must be enabled by exporting a constant: export const ssr = true;. Just assigning ssr = true; is invalid.

2. Step 2: Analyze error cause

   Without export const, Astro does not recognize the SSR flag, causing an error.

3. Final Answer:

   Because ssr must be exported with export const -> Option C

4. Quick Check:

   SSR requires export const ssr = true [OK]

Hint: Always use 'export const ssr = true;' to enable SSR [OK]

Common Mistakes:

• Forgetting to export ssr
• Setting ssr without const
• Trying to set ssr inside HTML

5. You want to create an Astro page that shows a user's profile with fresh data on every request. Which approach correctly enables SSR and fetches fresh data?

---
// Fill in the missing code
---
User Profile
Name: {user.name}
Age: {user.age}

hard

A. const ssr = true;
const user = fetchUserFromAPI();

B. export const ssr = true;
const user = await fetchUserFromAPI();

C. export const ssr = false;
const user = await fetchUserFromAPI();

D. export const ssr = true;
const user = fetchUserFromAPI();

Solution

1. Step 1: Enable SSR correctly

   Use export const ssr = true; to enable server-side rendering so data is fresh on each request.

2. Step 2: Fetch data asynchronously

   Use await to fetch user data asynchronously before rendering the page.

3. Step 3: Analyze options

   export const ssr = false; const user = await fetchUserFromAPI(); disables SSR, so data won't be fresh. const ssr = true; const user = fetchUserFromAPI(); misses export and await. export const ssr = true; const user = fetchUserFromAPI(); misses await, so user is a Promise, causing error.

4. Final Answer:

   export const ssr = true; const user = await fetchUserFromAPI(); -> Option B

5. Quick Check:

   SSR + await fetch = fresh data per request [OK]

Hint: Use 'export const ssr = true;' and await data fetch [OK]

Common Mistakes:

• Not exporting ssr constant
• Forgetting to await async data fetch
• Disabling SSR by setting ssr to false