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
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:
1 parent
b20fefc432
commit
1b387700d3
1 file changed
+14
-2
@@ -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/
|
||||
* 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 {
|
||||
// Production path — Dockerfile copies browser output here
|
||||
// CSR shell first — avoid prerendered index.html with stale content
|
||||
const productionPaths = [
|
||||
'/usr/share/nginx/html/index.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',
|
||||
];
|
||||
|
||||
|
||||
Reference in new issue
Block a user