Partial Hydration in Astro
--- // Example: Use a dynamic React component on the page. import MyReactComponent from '../components/MyReactComponent.jsx'; --- <!-- This component is now interactive on the page! The rest of your website remains the same. --> <MyReactComponent client:load />
The vast majority of your site remains pure, lightweight HTML and CSS, with isolated islands of interactivity.
Partial HydrationSection titled Partial Hydration
There are plenty of cases where you need an interactive UI component to run in the browser:
- An image carousel
- An auto-complete search bar
- A mobile sidebar open/close button
- A “Buy Now” button
In Astro, it’s up to you as the developer to explicitly opt in any components on the page that need to run in the browser. Astro will only hydrate exactly what’s needed on the page and leave the rest of your site as static HTML. This technique is known as partial hydration.
Partial hydration is the secret to Astro’s fast-by-default performance story.
Islands ArchitectureSection titled Islands Architecture
The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions.
-- Islands Architecture: Jason Miller
- Components load individually. A lightweight component (like a sidebar toggle) will load and render quickly without being blocked by the heavier components on the page.
- Components render in isolation. Each part of the page is an isolated unit, and a performance issue in one unit won’t directly affect the others.
Server-rendered HTML content like text, images, etc.