client:load directive in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the client:load directive do in Astro?

It tells Astro to load and run the component only after the page has fully loaded in the browser, ensuring the component runs on the client side after initial HTML is rendered.

intermediate

When should you use client:load instead of client:idle in Astro?

Use client:load when you want the component to load as soon as the page finishes loading, not waiting for the browser to be idle like client:idle does.

beginner

How does client:load improve user experience compared to loading components immediately?

It allows the main HTML to render first, so users see content quickly, then loads interactive parts after the page load, reducing blocking and improving perceived speed.

beginner

Show the syntax to use client:load with a React component in Astro.

Example: <br> <MyComponent client:load /> <br> This tells Astro to load MyComponent only after the page load event.

intermediate

What happens if you omit client:load on a client component in Astro?

The component will not hydrate or run on the client side automatically, so interactive features may not work until explicitly loaded with a directive.

What event triggers a component with client:load to load in Astro?

A When the page fully loads in the browser

B When the browser is idle

C Immediately during server rendering

D When the user clicks on the component

client:load waits for the page load event before loading the component on the client.

Which directive loads a component only after the browser is idle?

A client:load

B client:idle

C client:visible

D client:media

client:idle waits for the browser to be idle before loading the component.

What is the main benefit of using client:load in Astro?

A It disables client-side interactivity

B It runs the component on the server only

C It loads the component immediately during server rendering

D It delays component loading until after page load to improve performance

client:load delays loading until after page load, improving perceived speed.

How do you apply client:load to a component in Astro?

A &lt;Component client:visible /&gt;

B &lt;Component client:idle /&gt;

C &lt;Component client:load /&gt;

D &lt;Component server:load /&gt;

The syntax is <Component client:load /> to load after page load.

If a component lacks any client directive in Astro, what happens?

A It renders static HTML but no client interactivity

B It never renders on the server

C It loads and runs on the client automatically

D It throws an error

Without a client directive, the component renders static HTML but does not hydrate for interactivity.

Explain how the client:load directive works in Astro and when you would use it.

Think about when the component starts running in the browser.

Compare client:load with client:idle in Astro and describe scenarios for each.

Consider timing and user experience impact.