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/
|
* 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',
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user