Hybrid rendering (static + server) in Astro - Step-by-Step Execution

Concept Flow - Hybrid rendering (static + server)

Start Build

↓

Static Content Rendered

↓

Server Components Marked

↓

Server Render at Request Time

↓

Client Receives Combined Page

↓

Static + Server Content Displayed

The build creates static parts first, then server parts render on request, combining both for the final page.

Execution Sample

Astro

---
const time = await Astro.fetchContent('/api/time');
---
<html>
  <body>
    <h1>Static Title</h1>
    <p>Current time: {time}</p>
  </body>
</html>

This Astro component renders a static title at build time and fetches current time from server at request.

Execution Table

Step	Action	Static Content	Server Content	Output
1	Build starts			Preparing static and server parts
2	Render static parts	<h1>Static Title</h1>		Static HTML generated
3	Mark server parts		<p>Current time: {time}</p>	Server content identified
4	Request received			Server rendering triggered
5	Fetch current time		Current time: 10:00 AM	Server content rendered
6	Combine static + server	<h1>Static Title</h1>	Current time: 10:00 AM	Full page sent to client
7	Client displays page	<h1>Static Title</h1>	Current time: 10:00 AM	User sees combined content
8	Request ends			Waiting for next request

💡 Execution stops after client receives and displays combined static and server content.

Variable Tracker

Variable	Start	After Build	After Request	Final
time	undefined	undefined	10:00 AM	10:00 AM
Static Content	none	<h1>Static Title</h1>	<h1>Static Title</h1>	<h1>Static Title</h1>
Server Content	none	marked	Current time: 10:00 AM	Current time: 10:00 AM

Key Moments - 3 Insights

Why is the static content available before the server content?

Static content is generated at build time (see step 2), while server content is rendered later on each request (step 5).

How does the server content get updated on each request?

Server content runs code at request time (step 4 and 5), fetching fresh data like current time before combining with static parts.

What happens if the server content fails to load?

The static content still shows because it was pre-built, but server content might be empty or show an error depending on implementation.

Visual Quiz - 3 Questions

Look at the execution table, at which step is the server content first rendered?

A Step 2

B Step 5

C Step 3

D Step 7

💡 Hint

Check the 'Server Content' column where actual time value appears.

According to variable_tracker, what is the value of 'time' after the build but before the request?

A "10:00 AM"

B marked

C undefined

D none

💡 Hint

Look at the 'time' row under 'After Build' column.

If the static content changed, which step in the execution_table would reflect that?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Static content is generated during build time, see step 2.

Concept Snapshot

Hybrid rendering in Astro:
- Static parts build once at build time
- Server parts render fresh on each request
- Combined output sent to client
- Static content loads fast
- Server content updates dynamically
- Best of both worlds for performance and freshness

Full Transcript

Hybrid rendering in Astro means some parts of the page are created once when you build your site, called static content. Other parts, called server content, are created fresh every time someone visits the page. The process starts by building static content, like titles or fixed text. Then, server parts are marked to run on demand. When a user requests the page, the server runs code to get fresh data, like the current time. Finally, Astro combines the static and server parts and sends the full page to the user. This way, users get fast loading static content plus up-to-date dynamic content. Variables like 'time' start undefined, get their value only when the server renders on request. This approach balances speed and freshness nicely.

Practice

1. What is the main benefit of using hybrid rendering in Astro?

easy

A. It only renders pages fully on the client side.

B. It combines fast static content with fresh server data.

C. It disables server-side rendering completely.

D. It requires no data fetching at all.

Solution

1. Step 1: Understand hybrid rendering purpose

   Hybrid rendering mixes static and server-rendered content to get the best of both worlds: speed and fresh data.

2. Step 2: Compare options

   Only 'It combines fast static content with fresh server data.' correctly describes this benefit. The other options misunderstand hybrid rendering.

3. Final Answer:

   It combines fast static content with fresh server data. -> Option B

4. Quick Check:

   Hybrid rendering = fast + fresh [OK]

Hint: Hybrid means mixing static speed with server freshness [OK]

Common Mistakes:

• Thinking hybrid disables server rendering
• Assuming hybrid is client-only rendering
• Believing hybrid needs no data fetching

2. Which Astro syntax correctly fetches data on the server side for hybrid rendering?

easy

A. fetch('https://api.example.com').then(data => setData(data))

B. const data = fetch('https://api.example.com')

C. ---
const data = await fetch('https://api.example.com')
---

D. useEffect(() => { fetch('https://api.example.com') })

Solution

1. Step 1: Identify Astro frontmatter usage

   Astro uses frontmatter (---) to run server-side code before rendering.

2. Step 2: Check options for server-side fetch

   --- const data = await fetch('https://api.example.com') --- uses frontmatter with await fetch, which is correct. The other options lack frontmatter or use client-side hooks.

3. Final Answer:

   ---\nconst data = await fetch('https://api.example.com')\n--- -> Option C

4. Quick Check:

   Server fetch = frontmatter + await [OK]

Hint: Use frontmatter (---) with await for server fetch [OK]

Common Mistakes:

• Omitting frontmatter for server code
• Using client hooks like useEffect in Astro
• Not awaiting fetch in server code

3. Given this Astro component code, what will be rendered?

---
const time = new Date().toLocaleTimeString();
---

  
    
Current Time:
    
{time}
  

medium

A. The time when the page was built (static time).

B. The current time updated every second.

C. An error because {time} is invalid syntax.

D. Nothing, because time is not defined.

Solution

1. Step 1: Understand Astro frontmatter timing

   Code inside frontmatter runs once at build or server render time, so time is fixed then.

2. Step 2: Check rendering behavior

   The rendered page shows the time captured during rendering, not live updates. So The time when the page was built (static time). is correct.

3. Final Answer:

   The time when the page was built (static time). -> Option A

4. Quick Check:

   Frontmatter time = fixed render time [OK]

Hint: Frontmatter runs once; time is static, not live [OK]

Common Mistakes:

• Thinking time updates live on client
• Confusing Astro syntax with React JSX
• Assuming {time} causes error

4. What is wrong with this Astro code snippet for hybrid rendering?

---
const data = fetch('https://api.example.com/data');
---
{data.json()}

medium

A. fetch is not awaited, so data is a Promise, causing an error.

B. Using fetch inside frontmatter is not allowed.

C. The <p> tag cannot contain JavaScript expressions.

D. data.json() returns a string, which cannot be rendered.

Solution

1. Step 1: Check fetch usage

   fetch returns a Promise; without await, data is a Promise, not the response.

2. Step 2: Understand rendering error

   Calling data.json() on a Promise causes an error because data is not resolved yet.

3. Final Answer:

   fetch is not awaited, so data is a Promise, causing an error. -> Option A

4. Quick Check:

   Always await fetch in frontmatter [OK]

Hint: Always await fetch to get response, not Promise [OK]

Common Mistakes:

• Forgetting to await fetch
• Misunderstanding frontmatter fetch rules
• Thinking data.json() returns string directly

5. You want to build a blog page in Astro that shows static posts but also displays the current number of visitors fetched live from the server. Which approach best uses hybrid rendering?

hard

A. Render everything statically with no data fetching.

B. Fetch both posts and visitor count inside frontmatter only.

C. Fetch posts on client side with useEffect, visitor count in frontmatter.

D. Fetch posts in frontmatter for static build, then fetch visitor count inside a server component.

Solution

1. Step 1: Separate static and dynamic data

   Posts are mostly static, so fetching them in frontmatter for static build is efficient.

2. Step 2: Use server component for live data

   Visitor count changes often, so fetching it in a server component ensures fresh data on each request.

3. Step 3: Evaluate options

   Fetch posts in frontmatter for static build, then fetch visitor count inside a server component. correctly mixes static and server rendering. The other options do not use hybrid rendering properly.

4. Final Answer:

   Fetch posts in frontmatter for static build, then fetch visitor count inside a server component. -> Option D

5. Quick Check:

   Static + server fetch = hybrid rendering [OK]

Hint: Static data in frontmatter, dynamic in server component [OK]

Common Mistakes:

• Fetching all data statically losing freshness
• Fetching static data on client unnecessarily
• Not separating static and dynamic concerns