client:idle for deferred hydration in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does client:idle do in Astro?

client:idle tells Astro to wait until the browser is idle before hydrating a component. This means the component loads only when the user is not busy, improving page speed.

beginner

Why use client:idle instead of client:load?

client:idle delays hydration until the browser is free, reducing initial load work. client:load hydrates immediately after page load, which can slow down the user experience.

intermediate

How does client:idle improve user experience?

By hydrating components only when the browser is idle, it avoids blocking important tasks. This keeps the page responsive and fast for the user.

intermediate

When should you avoid using client:idle?

Avoid client:idle for components that need to be interactive immediately, like buttons or forms visible on page load.

advanced

What browser API does client:idle rely on to detect idle time?

client:idle uses the requestIdleCallback API to run hydration when the browser is idle.

What does client:idle do in Astro?

A Hydrates a component only on user click

B Hydrates a component immediately on page load

C Hydrates a component when the browser is idle

D Prevents hydration of a component

client:idle waits for the browser to be idle before hydrating, improving performance.

Which API does client:idle use to detect idle time?

A requestIdleCallback

B setTimeout

C requestAnimationFrame

D IntersectionObserver

requestIdleCallback lets scripts run when the browser is idle, which client:idle uses.

When is client:idle NOT a good choice?

A For components that need immediate interaction

B For large images

C For components that appear below the fold

D For static content

Components needing immediate interaction should hydrate right away, so client:idle is not suitable.

What is a main benefit of using client:idle?

A More animations on page

B Loads components on user scroll

C Disables JavaScript

D Faster initial page load

Delaying hydration until idle reduces work during page load, making it faster.

How does client:idle affect JavaScript execution?

A Runs JavaScript only after user clicks

B Runs JavaScript when browser is idle

C Runs JavaScript immediately

D Prevents JavaScript from running

client:idle schedules JavaScript to run when the browser is free, improving responsiveness.

Explain how client:idle works in Astro and why it helps performance.

Think about when the browser is free to do extra work.

Describe scenarios when you should and should not use client:idle for component hydration.

Consider user interaction needs.