client:media
The client:media directive hydrates a component only when a CSS media query matches.
Syntax
<Sidebar client:media="(max-width: 768px)" />Examples
---
import MobileMenu from '../components/MobileMenu.jsx';
---
<MobileMenu client:media="(max-width: 768px)" />
Output
The mobile menu's JavaScript loads and hydrates only on viewports up to 768px wide.
Notes
Perfect for components needed on only one breakpoint, such as a mobile-only drawer, avoiding wasted JS on desktop. The query is re-evaluated, so resizing across the breakpoint can trigger hydration.