astro/static-by-default

Why

A React, Vue or Svelte component used without a directive renders to HTML with no JavaScript. Each client:* directive adds the framework runtime and the component's code to the page, and client:load runs it at once, competing with the content the visitor came for. A footer, a card list or a static menu with client:load costs script and interaction delay for nothing.

Fix

Remove the directive when the component only displays data. Otherwise choose by need: client:load for what must work at once above the fold, client:idle for lower priority, client:visible (with rootMargin if it should be ready slightly before scrolling into view) for content further down, client:media for UI that exists only at some widths. Review by hand: only the author knows whether the component is interactive and where it sits.

Examples

<!-- bad -->
<Footer client:load />
<Comments client:load />
<!-- good -->
<Footer />
<Comments client:visible={{ rootMargin: '300px' }} />

Sources

• Astro docs, Template directives reference (client directives and their priority)
• Astro docs, Islands architecture

Read it in the terminal

npx github:dawidolko/frontend-skills explain astro/static-by-default