I ran into two separate rendering issues while working on the Notes page.

  • The status line was delayed. The page layout keeps the header and status line fixed in view while the main content scrolls. With a long article, the status line could take noticeably longer to appear — especially when the article contained something like RepoStats, which waits for data from an external source.
  • The content appeared to jump. During development, the main content area visibly shifted after the page initially rendered. This turned out to be related to Astro’s development toolbar rather than the page layout itself. It doesn’t happen in production, but it made the other rendering behaviour much harder to reason about.

First, I disabled Astro’s dev toolbar to get the misleading content jump out of the way:

astro preferences disable devToolbar

The jump disappeared, confirming it was a development-only issue. Now I could focus on the actual problem: the status line taking longer to appear when the main content was long, especially when it contained a component fetching external data.

The actual culprit turned out to be RepoStats. Its GitHub requests were being awaited as part of generating the page, so the rest of the HTML had to wait for them.

Making it a Server Island with server:defer moves that work out of the initial page generation:

<RepoStats
    username="nilshendriks"
    repo="nilshendriks.com"
    server:defer
>
    <div slot="fallback">
        $ repo stats _
    </div>
</RepoStats>

Now the page can render immediately, while RepoStats loads separately.

Oddity

I also tried deferring the NotesList itself as a Server Island. That didn’t work as expected: components used inside the MDX notes lost their scoped styles when rendered inside the island.

For example, the Figure component in the Roetz Analog note rendered without its component-scoped CSS.

At first, I left the experiment in a small test page, assuming this was probably a limitation or bug in how Server Islands handled MDX content.

I eventually isolated the problem in a minimal reproduction. The important part turned out to be the combination of:

  • an MDX content entry
  • render() from astro:content
  • a component with scoped CSS
  • and server:defer

The component’s HTML still received its data-astro-cid-* attribute, but the corresponding scoped CSS wasn’t included when the MDX content was rendered inside the deferred Server Island.

I reported it to Astro as #17870, including the minimal reproduction and a deployed example.

Astro reproduced the problem and fixed it shortly afterwards in #17879. The fix preserves assets propagated from components rendered inside Server Islands, including the styles that were missing in this case.

So the oddity wasn’t a problem with the Notes page after all — it was an actual Astro bug.