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 renders without its component-scoped CSS.

It looks like this may be an Astro bug, so I left the experiment in a small test page rather than pursuing it further.