Keep the dashboard the server streamed

`/` runs its reads server-side and hands them to TanStack through a
HydrationBoundary, so the first HTML already carries real tiles. React threw
that away on every cold load. The app shell hydrates first and its mount
answers `/api/auth/me`; the dashboard sits below `loading.tsx`, hydrates later,
and its first client render therefore read an account the server never had.
That disagreed with the streamed HTML, React reported #418 and re-rendered the
whole page. The prefetch paid for its queries and delivered none of its paint.

The account payload is now withheld from the hydration render wherever it is
only rendered. `useAccountOnceMounted()` answers null until the component has
mounted, which is what the server rendered, and hands the payload over on the
next render. The dashboard page, the caregiver card, the getting-started
checklist, the achievements tile and the unit labels read it that way. `useAuth`
itself still reads the cache, because the document vault redirects off
`user.modules` and a first render claiming "no account" bounces it to `/`.

Two tiles disagreed without any account involved. A query reports `isLoading`
true on the client's first render and false on the server, so both now gate on
whether the cell holds an answer.

Nothing in CI ran the shipped configuration: the suite's server turns the
prefetch off so route mocks keep governing the dashboard. A second server runs
it on, and one spec asserts that no hydration error is reported and that the
tile node the server streamed is still the node in the DOM once the page
settles.

Measured over nine cold loads with the CPU throttled 4x: seven bailouts before
and none after, median LCP 869 ms before and 145 ms after. FCP and the time to
the first tile in the DOM are unchanged, because the streamed paint was never
the problem. Keeping it was.
This commit is contained in:
Marc-André Bombeck committed 2026-08-06 17:28:48 +02:00
1 parent 03877a0971
commit 675c70eba8
16 files changed
+468 -60

No files matched your search

+25 -7
View File
@@ -45,13 +45,31 @@ describe("Playwright CI determinism", () => {
expect(config.retries).toBe(2);
expect(config.failOnFlakyTests).toBe(true);
expect(config.reporter).toEqual([["github"], ["html", { open: "never" }]]);
expect(config.webServer).toMatchObject({
command: expect.stringContaining(
`${JSON.stringify(process.execPath)} .next/standalone/server.js`,
),
env: expect.objectContaining({
NATIVE_CANVAS: "off",
}),
// Two servers, and which is which matters. The suite's own server runs
// with the dashboard's RSC prefetch OFF so `page.route` fixtures govern
// what the dashboard paints; the second runs it ON, which is the default
// and therefore the only configuration self-hosters ever see. A React #418
// hydration bailout shipped on `/` precisely because nothing in CI ran the
// shipped one. Pin both so that gap cannot reopen by deletion.
const servers = config.webServer;
expect(Array.isArray(servers)).toBe(true);
const webServers = servers as Array<Record<string, unknown>>;
expect(webServers).toHaveLength(2);
for (const server of webServers) {
expect(server).toMatchObject({
command: expect.stringContaining(
`${JSON.stringify(process.execPath)} .next/standalone/server.js`,
),
env: expect.objectContaining({
NATIVE_CANVAS: "off",
}),
});
}
expect(webServers[0]!.env).toMatchObject({
DASHBOARD_SSR_PREFETCH: "false",
});
expect(webServers[1]!.env).toMatchObject({
DASHBOARD_SSR_PREFETCH: "true",
});
});