0
0
Astroframework~5 mins

client:idle for deferred hydration in Astro

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

We use client:idle to make a component load only when the browser is not busy. This helps the page load faster and feel smoother.

When you have a widget that is not needed right away, like a chat box or a comments section.
If you want to improve page speed by delaying JavaScript until the user is idle.
For parts of the page that don't need to be interactive immediately, like a newsletter signup form.
When you want to reduce the initial load on the browser to save battery or data.
If you want to improve user experience by loading less important features later.
Syntax
Astro
<Component client:idle />
This attribute tells Astro to wait until the browser is idle before hydrating the component.
It helps defer JavaScript execution without blocking the main content.
Examples
This loads MyWidget only when the browser is idle, improving initial page speed.
Astro
<MyWidget client:idle />
The chat box will hydrate after the main content is ready and the browser is free.
Astro
<ChatBox client:idle />
Sample Program

This example shows a simple page with a Counter component. The counter will only start working when the browser is idle, so the main page loads fast.

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

<html lang="en">
  <head>
    <title>Idle Hydration Example</title>
  </head>
  <body>
    <h1>Welcome to the page!</h1>
    <p>This content loads immediately.</p>

    <!-- Counter will hydrate only when browser is idle -->
    <Counter client:idle />
  </body>
</html>
OutputSuccess
Important Notes

Using client:idle can improve performance but may delay interactivity.

It is best for components that are not critical for the first user interaction.

Check browser DevTools Performance tab to see when the component hydrates.

Summary

client:idle delays component hydration until the browser is free.

This improves page speed and user experience by loading less important parts later.

Use it for widgets or features that don't need to be interactive immediately.