Enabling SSR in Astro - Step-by-Step Execution

Concept Flow - Enabling SSR in Astro

Start Astro Project

↓

Set SSR: true in astro.config.mjs

↓

Write Astro Components

↓

Run Astro Dev Server

↓

Request Page

↓

Astro Server Renders HTML

↓

Send HTML to Browser

↓

Browser Displays Fully Rendered Page

↓

SSR Enabled Successfully

This flow shows how enabling SSR in Astro config triggers server-side rendering, sending fully rendered HTML to the browser.

Execution Sample

Astro

export default {
  ssr: true
};

This code enables SSR by setting ssr to true in the Astro config file.

Execution Table

Step	Action	Config State	Server Behavior	Output Sent
1	Start Astro project	ssr: false (default)	No SSR, static build	Static HTML files
2	Set ssr: true in astro.config.mjs	ssr: true	Server prepares to render on request	No output yet
3	Run dev server	ssr: true	Server listens for requests	No output yet
4	Request page from browser	ssr: true	Server renders page HTML dynamically	Full HTML page sent
5	Browser receives HTML	ssr: true	Browser displays fully rendered page	Visible page content
6	Further requests	ssr: true	Server renders each request dynamically	Fresh HTML each time

💡 SSR enabled, server renders pages on each request instead of serving static files.

Variable Tracker

Variable	Start	After Step 2	After Step 4	Final
ssr	false	true	true	true
server_state	static	ready for SSR	rendering HTML	rendering HTML
output_type	static files	none yet	dynamic HTML	dynamic HTML

Key Moments - 2 Insights

Why does setting ssr: true in astro.config.mjs change how pages are served?

Because as shown in execution_table step 2, setting ssr to true tells Astro to switch from static file serving to dynamic server-side rendering on each request.

Does enabling SSR mean the server sends JavaScript to the browser?

No, as seen in step 4 and 5, the server sends fully rendered HTML, so the browser can display the page immediately without waiting for JavaScript.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'ssr' after step 2?

A false

B true

C undefined

D null

💡 Hint

Check the 'Config State' column at step 2 in the execution_table.

At which step does the server start sending fully rendered HTML to the browser?

A Step 4

B Step 3

C Step 5

D Step 2

💡 Hint

Look at the 'Output Sent' column in the execution_table.

If ssr was not set to true, what would the server send to the browser?

A Dynamic HTML on each request

B No response

C Static HTML files

D Only JavaScript files

💡 Hint

Refer to step 1 in the execution_table under 'Output Sent'.

Concept Snapshot

Enable SSR in Astro by setting ssr: true in astro.config.mjs
This switches Astro from static site generation to server-side rendering
Server renders full HTML on each request
Browser receives ready-to-display HTML
Improves SEO and initial load speed
Remember to run dev or build with SSR enabled

Full Transcript

Enabling SSR in Astro means changing the configuration file astro.config.mjs to set ssr: true. This tells Astro to render pages on the server when a browser requests them, instead of serving pre-built static files. The flow starts with a default static setup, then after setting ssr to true, the server listens for requests and dynamically generates full HTML pages. The browser receives these fully rendered pages and displays them immediately. This improves SEO and user experience by showing content faster. The execution table shows each step from starting the project, changing config, running the server, to serving pages. Variables like ssr and server_state change accordingly. Key moments clarify why the config change matters and that SSR sends HTML, not just JavaScript. The quiz tests understanding of when SSR activates and what output is sent. The snapshot summarizes the quick steps to enable SSR in Astro.

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