mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +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.