Astro
Server islands
Server islands is Astro's pattern for components that render on the server after the page shell has been sent. A directive marks them, and a fallback shows meanwhile.
How it is measured
Add server:defer to a component. The page is built or cached without it, and the browser fetches that fragment from a server route. Put placeholder markup in a fallback slot.
Measure the shell's time to first byte and the fragment's time separately. The shell should be as fast as a static file. The island has its own request and its own cost.
Worked example
A shoe store has product pages cached at the CDN. The price and stock block uses server:defer. The cached shell returns in 25 ms, and the stock block returns 140 ms later with live numbers.
Without the pattern, the whole page needed an origin render of 180 ms for every visit, even though only 1 of 40 blocks changed.
How it differs
Server islands defer a server-rendered fragment. An Astro island hydrates a client-side component. Server islands exclude browser JavaScript for the fragment; ordinary islands exclude server work after the first render.
Common errors
Forgetting that the fragment makes a second request. Leaving no fallback and shifting the layout. Using it without an adapter. Caching the fragment where it should be personal. Putting a hero image inside and delaying the largest paint.
In practice
Use it for small personal or live blocks on otherwise cacheable pages. Give the fallback the right size. Keep the fragment's work short.