client:load directive in Astro - Step-by-Step Execution

Concept Flow - client:load directive

Astro Server Render

↓

HTML Sent to Browser

↓

Browser Loads Page

↓

client:load Directive Detected

↓

Load Component JS Immediately

↓

Hydrate Component on Client

↓

Component Fully Interactive

This flow shows how Astro sends HTML first, then the client:load directive triggers loading and hydrating the component JavaScript immediately after the page loads.

Execution Sample

Astro

<MyComponent client:load />

This code tells Astro to render MyComponent on the server and load its JavaScript immediately on the client after page load.

Execution Table

Step	Action	Result	Notes
1	Astro renders <MyComponent> to HTML on server	Static HTML output	Server-side rendering
2	Send HTML to browser	Browser receives HTML	Page starts loading
3	Browser parses HTML	DOM created	Page structure visible
4	client:load directive triggers	Component JS starts loading	Immediately after page load
5	Component JS loads and runs	Component hydrates	Becomes interactive
6	User interacts with component	Component responds	Full client interactivity
7	No further loading needed	Page fully interactive	client:load done

💡 Component JS loaded and hydrated, making component interactive on client

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
Component HTML	Not rendered	Rendered on server	Rendered on server	Rendered on server
Component JS Loaded	False	True	True	True
Component Hydrated	False	False	True	True
Component Interactive	False	False	True	True

Key Moments - 3 Insights

Why does the component HTML appear before the JavaScript loads?

Because Astro renders the component to static HTML on the server first (see Step 1 and 2), so the page shows content immediately before JS loads.

When exactly does the component JavaScript load on the client?

It loads immediately after the page finishes loading, triggered by the client:load directive (see Step 4).

What happens if the user interacts before the JS loads?

The component is not interactive yet until hydration completes (Step 5), so interactions won't work until then.

Visual Quiz - 3 Questions

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

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Check the 'Action' column for when 'Component JS starts loading' occurs.

According to the variable tracker, when does the component become interactive?

A After Step 4

B At Start

C After Step 5

D Never

💡 Hint

Look at 'Component Interactive' variable values after each step.

If the client:load directive was removed, what would change in the execution table?

A Component JS would not load automatically on page load

B Component JS would load immediately after HTML parsing

C Component HTML would not render on server

D Component would hydrate before page load

💡 Hint

Consider what triggers JS loading in Step 4.

Concept Snapshot

client:load directive in Astro:
- Server renders component HTML first
- Sends HTML to browser
- client:load triggers JS loading immediately after page load
- Component hydrates and becomes interactive
- Ensures fast content display with quick interactivity

Full Transcript

The client:load directive in Astro tells the framework to render the component as static HTML on the server and send it to the browser. Once the browser loads the page, the directive triggers the component's JavaScript to load immediately. This JavaScript then hydrates the component, making it interactive for the user. This approach ensures users see content quickly and get full interactivity soon after. The execution steps start with server rendering, then HTML delivery, browser parsing, JS loading triggered by client:load, hydration, and finally user interaction.