CodePark/ questions / Hydration cost & islands
START PRACTICINGPRACTICE
Frontend question · Browser & web performance › Hydration cost & islands

In an Astro page, what does client:visible do to this React component?

---
import Comments from "../components/Comments.jsx";
---
<article>...long static post...</article>
<Comments client:visible />
The server renders its HTML, and its JavaScript loads and hydrates only when it scrolls into view

Astro renders every component to HTML on the server. The client:visible directive makes it an island that loads its JavaScript and hydrates when it enters the viewport. The article around it ships no JavaScript at all.

"It hydrates as soon as the page loads" describes client:load, the tempting wrong answer. "Rendered only in the browser" describes client:only. With no directive, the component is static HTML and never hydrates.