client:idle for deferred hydration in Astro - Step-by-Step Execution

Concept Flow - client:idle for deferred hydration

Page Loads with Static HTML

↓

Browser Idle Detected?

No→Wait

Yes↓

Hydrate Component

↓

Component Becomes Interactive

The page loads static HTML first, then waits until the browser is idle before hydrating the component to make it interactive.

Execution Sample

Astro

<MyComponent client:idle />

This code tells Astro to hydrate MyComponent only when the browser is idle.

Execution Table

Step	Browser State	Action	Component State	Output
1	Page loading	Render static HTML	Not hydrated	Static content visible, no interactivity
2	Browser busy	Wait for idle	Not hydrated	Static content remains
3	Browser idle detected	Start hydration	Hydrating	Component scripts load and run
4	Hydration complete	Component interactive	Hydrated	User can interact with component
5	User interacts	Component responds	Hydrated	Dynamic behavior visible

💡 Hydration occurs only after browser becomes idle, making component interactive.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
componentHydrated	false	false	true	true	true
browserIdle	false	false	true	true	true

Key Moments - 3 Insights

Why doesn't the component hydrate immediately after page load?

Because hydration waits until the browser is idle (see execution_table step 2), so it doesn't block important tasks during busy times.

What triggers the hydration process?

The browser becoming idle triggers hydration (execution_table step 3), starting the component's interactive scripts.

Is the component interactive before hydration?

No, before hydration (steps 1 and 2), the component is static and not interactive, only after step 4 it becomes interactive.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the component start hydrating?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Check the 'Action' column for when hydration starts.

According to the variable tracker, what is the value of 'componentHydrated' after step 2?

A true

B false

C undefined

D null

💡 Hint

Look at the 'componentHydrated' row under 'After Step 2' column.

If the browser never becomes idle, what happens to the component hydration?

A Hydration never happens

B Hydration happens immediately

C Hydration happens after a timeout

D Component is hydrated on page load

💡 Hint

Refer to the concept flow where hydration waits for browser idle.

Concept Snapshot

client:idle hydration in Astro:
- Loads static HTML first
- Waits for browser idle event
- Then hydrates component
- Makes component interactive
- Improves performance by deferring scripts

Full Transcript

In Astro, using client:idle means the component's JavaScript waits until the browser is idle before running. First, the page shows static HTML without interactivity. The browser does its main work. When it becomes idle, hydration starts, loading scripts and making the component interactive. This approach improves performance by not blocking important tasks during page load. The component is not interactive until hydration finishes. If the browser never becomes idle, hydration does not happen, keeping the component static.