If I use something like
<LoginIsland server:defer>
<LoginFallback slot="fallback" />
</LoginIsland>
it first shows the fallback, but then shows the fallback AND the actual alue of LoginIsland
#Server island does not remove the fallback
hot dust
winter gulchBOT
Hi @hot dust. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the official Astro documentation, when you use a server island with the server:defer directive and provide fallback content using slot="fallback", the expected behavior is:
- The fallback content (e.g.,
<LoginFallback />) is rendered immediately with the rest of the page. - Once the server island (
<LoginIsland />) finishes rendering on the server and is fetched by the client, the fallback content should be replaced by the actual content of the island.
If you are seeing both the fallback and the actual content displayed at the same time, this is not the intended behavior according to the documentation. The fallback should be replaced, not shown alongside the loaded island content.
Here’s the relevant example from the docs:
<Avatar server:defer>
<GenericAvatar slot="fallback" />
</Avatar>
Your fallback content will be rendered along with the rest of the page initially on page load and will be replaced with your component’s content when available.
... Fallback content will be visible for a short amount of time before the dynamic islands are then loaded.
Each island is loaded independently from the rest. This means a slower island won’t delay the rest of your personalized content from being available.
Server islands guide
If the fallback is not being removed as expected, this could indicate a bug or an issue with how the slot is being used. Double-check that:
- The
slot="fallback"attribute is correctly set on the fallback element. - There are no errors in the browser console that might prevent the replacement.
- You are using a supported adapter, as server islands require one to function properly.