Hybrid rendering (static + server) in Astro - Mini Project: Build & Apply

Hybrid Rendering with Astro: Static + Server Components

📖 Scenario: You are building a simple blog homepage using Astro. Some parts of the page should be static for fast loading, like the header and footer. Other parts, like the latest comments, should be fetched dynamically on the server each time the page loads.

🎯 Goal: Create an Astro page that uses hybrid rendering: static components for header and footer, and a server component to fetch and display latest comments dynamically.

📋 What You'll Learn

Create a static header component with a title

Create a static footer component with copyright text

Create a server component that fetches latest comments data

Use the server component inside the main page to show dynamic comments

Combine static and server components in one Astro page

💡 Why This Matters

🌍 Real World

Hybrid rendering is common in modern web apps to balance fast static content with dynamic data updates, improving user experience and performance.

💼 Career

Understanding how to combine static and server components in Astro is valuable for frontend developers working on performant, SEO-friendly websites with dynamic content.

1

Create static header and footer components

Create two Astro components: Header.astro and Footer.astro. In Header.astro, write a <header> element with an <h1> containing the text My Blog. In Footer.astro, write a <footer> element with a <p> containing the text © 2024 My Blog.

Astro

# Create Header.astro with My Blog
# Create Footer.astro with © 2024 My Blog

Hint

Use simple HTML tags inside Astro components. No scripts needed here.

2

Create a server component to fetch comments

Create a server component called LatestComments.astro. Inside, define an async function called getComments that returns an array of comment objects with id and text. For this exercise, return a hardcoded array: [{ id: 1, text: 'Great post!' }, { id: 2, text: 'Thanks for sharing.' }]. Then, call getComments() and store the result in a variable called comments.

Astro

--- Header.astro ---

  My Blog


--- Footer.astro ---

  © 2024 My Blog


--- LatestComments.astro ---
---
// Your code here

Hint

Use await to get the comments array inside the frontmatter script.

3

Render the comments list in the server component

In LatestComments.astro, below the frontmatter, add HTML to render an unordered list <ul>. Use a {comments.map(comment => ...)} expression to create a <li> for each comment's text. Each <li> should have a key attribute set to comment.id.

Astro

--- Header.astro ---

  My Blog


--- Footer.astro ---

  © 2024 My Blog


--- LatestComments.astro ---
---
async function getComments() {
  return [
    { id: 1, text: 'Great post!' },
    { id: 2, text: 'Thanks for sharing.' }
  ];
}

const comments = await getComments();
---



  {/* Your code here */}

Hint

Use JSX-style map inside Astro to render lists dynamically.

4

Combine static and server components in the main page

Create a page called src/pages/index.astro. Import Header, Footer, and LatestComments components. Render them in order: <Header />, then <main> containing <LatestComments />, then <Footer />. This page should combine static header/footer with server-rendered comments.

Astro

--- Header.astro ---

  My Blog


--- Footer.astro ---

  © 2024 My Blog


--- LatestComments.astro ---
---
async function getComments() {
  return [
    { id: 1, text: 'Great post!' },
    { id: 2, text: 'Thanks for sharing.' }
  ];
}

const comments = await getComments();
---

  {comments.map(comment => (
    {comment.text}
  ))}


--- index.astro ---
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import LatestComments from '../components/LatestComments.astro';
---

Hint

Use Astro's component import and JSX-style tags to combine components.

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