astro/server-defer-fallback

Dlaczego

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.

Poprawka

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.

Przykłady

<!-- 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>

Źródła

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

Przeczytaj w terminalu

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