astro/server-defer-fallback

Why

A component with server:defer is left out of the first HTML and fetched afterwards. Without fallback content its space is empty until the request returns, so the page jumps when it arrives. Its props travel in the request URL: functions cannot be passed, and above 2,048 bytes Astro switches to a POST request that browsers do not cache.

Fix

Add a child with slot="fallback" (a skeleton or generic version of the same size). Pass ids and small values, not whole objects or arrays; let the island load its own data. Server islands need an adapter installed.

Examples

<!-- bad -->
<Avatar server:defer user={user} />
<!-- good -->
<Avatar server:defer userId={user.id}>
  <img slot="fallback" src={genericAvatar.src} alt="" width="40" height="40" />
</Avatar>

Sources

• Astro docs, Server islands (fallback content, passing props)

Read it in the terminal

npx github:dawidolko/frontend-skills explain astro/server-defer-fallback