client:idle for deferred hydration in Astro - Mini Project: Build & Apply

Using client:idle for Deferred Hydration in Astro

📖 Scenario: You are building a simple Astro website that shows a greeting message. To improve performance, you want the greeting component to hydrate only when the browser is idle, so the page loads faster initially.

🎯 Goal: Create an Astro component that uses client:idle to defer hydration until the browser is idle.

📋 What You'll Learn

Create an Astro component with a greeting message

Add a client directive client:idle to defer hydration

Use a config variable to hold the greeting text

Render the greeting message inside the component

💡 Why This Matters

🌍 Real World

Deferring hydration with client:idle is useful for improving website performance by loading JavaScript only when the browser is idle, making pages feel faster for users.

💼 Career

Understanding deferred hydration is important for frontend developers working with Astro or similar frameworks to optimize user experience and site speed.

1

Create the Greeting Component

Create an Astro component file named Greeting.astro with a const greeting variable set to "Hello, welcome to our site!".

Astro

// Create a const variable called greeting with the exact text
// Your code here

Hint

Use const greeting = "Hello, welcome to our site!"; to create the greeting text.

2

Add the Greeting Markup

Inside Greeting.astro, add a <div> element that displays the greeting variable using curly braces {greeting}.

Astro

const greeting = "Hello, welcome to our site!";
 that shows the greeting variable -->
// Your code here

Hint

Use <div>{greeting}</div> to show the greeting text.

3

Add client:idle Directive for Deferred Hydration

Add the client:idle directive to the root <div> element in Greeting.astro to defer hydration until the browser is idle.

Astro

const greeting = "Hello, welcome to our site!";


{greeting}
// Your code here

Hint

Add client:idle inside the opening <div> tag.

4

Use the Greeting Component in a Page

In your Astro page file (e.g., src/pages/index.astro), import the Greeting component and include it in the page markup.

Astro

---
import Greeting from '../components/Greeting.astro';
---


// Your code here

Hint

Use import Greeting from '../components/Greeting.astro'; and then add <Greeting /> in the markup.