Hybrid rendering (static + server) in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Astro component render?

Consider this Astro component that mixes static and server rendering:

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

  
    
Static Time:
    
{time}
    
      
    
  


---
// ServerTime.astro
const serverTime = new Date().toISOString();
---
Server Time: {serverTime}

What will the user see when loading this page?

A Both times update on each request dynamically.

B The static time is fixed at build time; the server time updates on each request.

C Both times are fixed at build time and never change.

D The static time updates dynamically; the server time is fixed at build time.

💡 Hint

Think about when static props are generated versus server components.

The static time is generated once during build and stays the same. The server time is rendered on each request inside the Astro island, so it updates.

📝 Syntax

intermediate

Which Astro syntax correctly defines a server-only component?

In Astro, how do you mark a component to run only on the server?

A

---
export const hydrate = 'server';
---

B

---
export const prerender = true;
---

C

---
export const client = false;
---

D

---
export const ssr = true;
---

💡 Hint

Look for the property that enables server-side rendering.

Setting export const ssr = true; marks the component to render only on the server in Astro.

🔧 Debug

advanced

Why does this Astro island fail to hydrate on the client?

Given this Astro island component:

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

  

The Counter component uses useState and useEffect but the button does not respond to clicks. What is the likely cause?

A The Counter component is not a client component and lacks hydration support.

B The <code>client:load</code> directive is missing from the Astro island.

C The Counter component is not imported correctly, causing a runtime error.

D The Astro island should use <code>client:visible</code> instead of <code>client:load</code>.

💡 Hint

Check if the Counter component is set up for client-side interactivity.

If Counter is a React component but not marked as a client component (e.g., missing export default function Counter() {} with client directives), it won't hydrate properly.

❓ state_output

advanced

What is the output of this Astro island with mixed state?

Analyze this Astro island with a React component:

---
import { useState } from 'react';
---
function Toggle() {
  const [on, setOn] = useState(false);
  return (
    
  );
}
---

  

What happens when the user clicks the button?

A The button toggles text between 'ON' and 'OFF' on each click.

B The button causes a runtime error due to missing React import.

C The button text never changes because state is lost after hydration.

D The button toggles but only after a page reload.

💡 Hint

Consider how React state works inside Astro islands.

The Astro island hydrates the React component on the client, enabling state and event handlers to work normally.

🧠 Conceptual

expert

Why use hybrid rendering in Astro for a blog site?

Imagine building a blog with Astro. You want fast page loads and some dynamic user comments. Why choose hybrid rendering (static + server) over fully static or fully server-rendered?

A Fully static is always better because it never needs server resources, so hybrid is unnecessary.

B Hybrid rendering forces all pages to load slowly because it mixes static and server code.

C Hybrid rendering lets you pre-build most pages for speed and update only dynamic parts on the server, balancing performance and freshness.

D Fully server-rendered is always better because it always shows the freshest content, so hybrid is redundant.

💡 Hint

Think about what parts of a blog change often and what parts stay the same.

Hybrid rendering allows static generation for fast loading of mostly fixed content, while server rendering handles dynamic parts like comments, giving a good balance.

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