fix(ssr): prefer index.csr.html over prerendered index.html for CSR users
CI Pipeline / backend-test (push) Successful in 20m24s
CI Pipeline / frontend-test (push) Successful in 25s
CI Pipeline / frontend-build (push) Successful in 31s
CI Pipeline / backend-lint (push) Successful in 11s
CI Pipeline / backend-test (pull_request) Successful in 20m14s
CI Pipeline / frontend-test (pull_request) Successful in 24s
CI Pipeline / frontend-build (pull_request) Successful in 32s
CI Pipeline / backend-lint (pull_request) Successful in 11s
CI Pipeline / quality-gate (push) Successful in 3s
CI Pipeline / quality-gate (pull_request) Successful in 4s

The browserIndexPath() function was resolving index.html first, which is
the prerendered output with stale build-time content baked into <app-root>.
Even with window.__STATION_CONFIG injection, the prerendered innerHTML
still shows old content on the first paint until Angular re-renders.

By preferring index.csr.html (the pure CSR shell with empty <app-root>),
regular users get a clean first paint — no stale prerendered DOM to flash.
This commit is contained in:
robot committed 2026-08-09 01:13:50 +00:00
1 parent b20fefc432
commit 1b387700d3
1 file changed
+14 -2
+14 -2
View File
@@ -72,7 +72,17 @@ const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
]; ];
/** /**
* Resolve the static browser index.html path. * Resolve the static CSR shell path (index.csr.html).
*
* IMPORTANT: We MUST prefer index.csr.html over index.html.
* The Angular build with prerender config produces both:
* - index.html: prerendered at build time with stale DEFAULT_CONFIG baked in
* - index.csr.html: pure CSR shell with empty <app-root> — Angular hydrates client-side
*
* Serving index.html to regular users causes the flash: the prerendered DOM
* shows stale build-time content until Angular re-renders with fresh data.
* Even with window.__STATION_CONFIG injection, the prerendered innerHTML inside
* <app-root> still shows old content on the first paint.
* *
* Production (Docker): browser files are copied to /usr/share/nginx/html/ * Production (Docker): browser files are copied to /usr/share/nginx/html/
* Local dev (ng build): browser files live in dist/radio-station/browser/ * Local dev (ng build): browser files live in dist/radio-station/browser/
@@ -80,9 +90,11 @@ const COLOR_MAP: ReadonlyArray<{ field: keyof StationConfig; prop: string }> = [
*/ */
function browserIndexPath(): string { function browserIndexPath(): string {
// Production path — Dockerfile copies browser output here // Production path — Dockerfile copies browser output here
// CSR shell first — avoid prerendered index.html with stale content
const productionPaths = [ const productionPaths = [
'/usr/share/nginx/html/index.html',
'/usr/share/nginx/html/index.csr.html', '/usr/share/nginx/html/index.csr.html',
'/usr/share/nginx/html/index.html',
'/var/www/html/index.csr.html',
'/var/www/html/index.html', '/var/www/html/index.html',
]; ];