`client:visible`

client:visible defers hydration until the user scrolls the component into view. Powered by IntersectionObserver.

When To Use

• Footers with interactive widgets
• Below-the-fold cards / galleries
• Long pages where most users never scroll all the way down

Example

<Comments client:visible postId={post.id} />
<Newsletter client:visible />

If a visitor reads only the top half of the page, those islands never hydrate and never ship their JS.

Tuning the Threshold

By default, the island hydrates as soon as ANY part of it is in view. You can tweak this with the client:visible="..." modifier:

<Widget client:visible={{ rootMargin: "300px" }} />

rootMargin: "300px" means “start hydrating when the element is within 300px of the viewport” — a bit earlier than strict intersection.

Up Next

The “render only on the client” escape hatch.