jsschools

server:defer

The server:defer directive renders a component as a server island, deferred and fetched after the page shell.

Since Astro 4.12 Spec ↗

Syntax

<Cart server:defer />

Examples

---
import Cart from '../components/Cart.astro';
---
<Cart server:defer>
  <p slot="fallback">Loading cart...</p>
</Cart>
Output 
The static page ships instantly with a "Loading cart..." placeholder, then the personalized cart streams in from the server.

Notes

Server islands let you cache or statically generate a page while still rendering dynamic, per-user pieces on the server without client JS. Provide a fallback slot for the placeholder. Requires an SSR-capable adapter.

See also