When to hydrate vs keep static in Astro - Quick Revision & Key Differences

Recall & Review

beginner

What does it mean to hydrate a component in Astro?

Hydrating a component means adding JavaScript to make it interactive after the page loads. It turns static HTML into a live, interactive part of the page.

beginner

When should you keep a component static in Astro?

Keep a component static when it only shows content that doesn't change or need user interaction. This makes the page faster and simpler.

beginner

What is a real-life example of when to hydrate a component?

If you have a button that changes color when clicked, you hydrate it so the button can respond to clicks and update on the page.

intermediate

How does keeping components static improve website performance?

Static components load faster because they don’t need extra JavaScript. This means less data to download and quicker page display.

intermediate

What are the downsides of hydrating too many components?

Hydrating many components adds more JavaScript, which can slow down the page and use more device power, making the site less efficient.

What does hydration do in Astro?

A Makes static HTML interactive by adding JavaScript

B Removes JavaScript from the page

C Converts JavaScript to HTML

D Prevents user interaction

Hydration adds JavaScript to static HTML so components can respond to user actions.

When should you keep a component static?

A When it needs to respond to clicks

B When it fetches data dynamically

C When it animates on scroll

D When it only displays fixed content

Static components are best for fixed content that does not change or need interaction.

What is a downside of hydrating many components?

A Faster page load

B Slower page and more power use

C Less JavaScript on the page

D No user interaction

Hydrating many components adds JavaScript, which can slow down the page and use more device resources.

Which component should you hydrate?

A A header with fixed title

B A static text paragraph

C A button that changes color when clicked

D An image with no interaction

Interactive elements like buttons that respond to clicks need hydration.

How does keeping components static help users?

A By loading pages faster

B By reducing interactivity

C By adding more JavaScript

D By making pages slower

Static components load faster because they don’t require extra JavaScript.

Explain when you should hydrate a component versus keep it static in Astro.

Think about whether the component needs to respond to user actions.

Describe the impact of hydrating too many components on website performance.

Consider what happens when the browser has to do more work.