mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 21:32:18 +00:00
Marc-André Bombeck
59acbed5ab
The root layout shipped the active locale's catalog as `<script defer>` and counted on it executing ahead of Next's hydration scripts. It does not: Next emits its own chunks as `async` tags AHEAD of anything the layout renders into `<head>`, and an `async` script runs the moment its fetch settles. So the 370 KB catalog was racing the app bundle, and on a cold load it lost about a third of the time — `load-locale` initialised with an empty cache, every `t()` in the hydration render returned its raw key against the server's real text, and React tore the tree down with a text hydration mismatch. The user saw a frame of `nav.skipToContent` before the provider's backfill landed. Register the catalog through `next/script` at `beforeInteractive` instead. Next's own bootstrap awaits those scripts before requiring a single app module, and pairs the registration with a `<link rel=preload>` so the download still starts with the document rather than after it. The CSP nonce rides along, so the posture is unchanged. Fold the boot global into the cache lazily rather than snapshotting it at module evaluation. The snapshot made correctness depend on an ordering the module cannot see; reading on demand reduces the invariant to something local and testable — whatever the boot script assigns is visible to the first `t()` that asks, whenever it lands. Measured on the dashboard render spec, 30 repeats per project against a production build: 11 of 30 failed on desktop before, 0 of 60 after.
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { readFileSync } from "node:fs";
|
|
import { join } from "node:path";
|
|
|
|
/**
|
|
* Root layout — i18n boot-script ordering pin.
|
|
*
|
|
* The locale catalog is a ~370 KB separate asset, and the client bundle
|
|
* needs it in hand for its FIRST render or `t()` resolves raw keys against
|
|
* the server's real text (React error #418, plus a visible frame of
|
|
* `nav.skipToContent` before the provider backfills).
|
|
*
|
|
* A plain `<script defer>` cannot deliver that. Next emits its own chunks
|
|
* as `async` tags AHEAD of anything the layout renders into `<head>`, and
|
|
* an `async` script executes the moment its fetch settles — so the catalog
|
|
* was racing the app bundle and lost about a third of cold loads.
|
|
* `next/script` at `beforeInteractive` is the only registration Next
|
|
* awaits before requiring an app module, so it is the one that holds.
|
|
*
|
|
* This is a structural pin: reverting the tag to `<script defer>` reads
|
|
* like a harmless simplification and its damage is intermittent.
|
|
*/
|
|
const LAYOUT_PATH = join(process.cwd(), "src/app/layout.tsx");
|
|
|
|
describe("root layout — i18n boot script", () => {
|
|
const src = readFileSync(LAYOUT_PATH, "utf8");
|
|
|
|
it("registers the catalog through next/script", () => {
|
|
expect(src).toContain('from "next/script"');
|
|
const tag = src.slice(src.indexOf("<Script"));
|
|
expect(tag).toContain('strategy="beforeInteractive"');
|
|
expect(tag).toContain("/i18n/${initialLocale}.js");
|
|
});
|
|
|
|
it("carries the CSP nonce", () => {
|
|
const tag = src.slice(
|
|
src.indexOf("<Script"),
|
|
src.indexOf("/>", src.indexOf("<Script")),
|
|
);
|
|
expect(tag).toContain("nonce={nonce}");
|
|
});
|
|
|
|
it("never falls back to a bare deferred script tag for the catalog", () => {
|
|
const bareTag = /<script\b[^>]*\/i18n\//;
|
|
expect(bareTag.test(src)).toBe(false);
|
|
});
|
|
});
|