fix(ssr): fetch station config during server-side rendering
CI Pipeline / backend-test (push) Successful in 5m18s
CI Pipeline / frontend-test (push) Successful in 23s
CI Pipeline / frontend-build (push) Successful in 29s
CI Pipeline / backend-lint (push) Successful in 7s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / quality-gate (pull_request) Successful in 2s
CI Pipeline / backend-test (pull_request) Successful in 5m14s
CI Pipeline / frontend-test (pull_request) Successful in 22s
CI Pipeline / frontend-build (pull_request) Successful in 29s
CI Pipeline / backend-lint (pull_request) Successful in 8s
CI Pipeline / backend-test (push) Successful in 5m18s
CI Pipeline / frontend-test (push) Successful in 23s
CI Pipeline / frontend-build (push) Successful in 29s
CI Pipeline / backend-lint (push) Successful in 7s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / quality-gate (pull_request) Successful in 2s
CI Pipeline / backend-test (pull_request) Successful in 5m14s
CI Pipeline / frontend-test (pull_request) Successful in 22s
CI Pipeline / frontend-build (pull_request) Successful in 29s
CI Pipeline / backend-lint (pull_request) Successful in 8s
The isPlatformBrowser guard in App.ngOnInit() was blocking stationConfig.load() on the server, so SSR always rendered with DEFAULT_CONFIG (hardcoded colors, assets, content). Two-part fix: - main.server.ts: Add APP_INITIALIZER that blocks server rendering until station config is fetched from the API. Only runs on the server — is a no-op in the browser to avoid blocking the client. - app.ts: Move stationConfig.load() before the isPlatformBrowser guard so ngOnInit also calls it on the server as a safety net. This ensures SSR HTML contains real DB values (colors, hero icon, station name, etc.) instead of build-time defaults — eliminating the stale-asset flash reported by users.
This commit is contained in:
1 parent
5b1006d321
commit
54bd869042
2 files changed
+25
-5
No files matched your search
+7
-4
@@ -54,14 +54,17 @@ export class App implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
|
// Load station config on BOTH server and browser. On the server this
|
||||||
|
// fetches fresh data from the API so SSR renders with real colors,
|
||||||
|
// assets, and content — not DEFAULT_CONFIG baked at build time.
|
||||||
|
this.stationConfig.load().catch(() => {});
|
||||||
|
|
||||||
// These DOM operations only run in the browser.
|
// These DOM operations only run in the browser.
|
||||||
if (!isPlatformBrowser(this.platformId)) return;
|
if (!isPlatformBrowser(this.platformId)) return;
|
||||||
|
|
||||||
// Load runtime config.json and station config asynchronously in the
|
// Load runtime config.json asynchronously in the background — do not
|
||||||
// background — do not block rendering. The app already renders with
|
// block rendering.
|
||||||
// defaults from the SSR/prerendered HTML.
|
|
||||||
loadAppConfigAsync(this.http).catch(() => {});
|
loadAppConfigAsync(this.http).catch(() => {});
|
||||||
this.stationConfig.load().catch(() => {});
|
|
||||||
|
|
||||||
// Start watching router for automatic SEO metadata updates per route.
|
// Start watching router for automatic SEO metadata updates per route.
|
||||||
this.seoService.watchRouter();
|
this.seoService.watchRouter();
|
||||||
|
|||||||
+18
-1
@@ -1,10 +1,12 @@
|
|||||||
import { APP_ID } from '@angular/core';
|
import { APP_ID, APP_INITIALIZER, PLATFORM_ID } from '@angular/core';
|
||||||
|
import { isPlatformBrowser } from '@angular/common';
|
||||||
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
|
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
|
||||||
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
||||||
|
|
||||||
import { appConfig } from './app/app.config';
|
import { appConfig } from './app/app.config';
|
||||||
import { App } from './app/app';
|
import { App } from './app/app';
|
||||||
import { APP_CONFIG, AppConfig } from './app/services/app-config.service';
|
import { APP_CONFIG, AppConfig } from './app/services/app-config.service';
|
||||||
|
import { StationConfigService } from './app/services/station-config.service';
|
||||||
import { serverRoutes } from './app/app.server.routes';
|
import { serverRoutes } from './app/app.server.routes';
|
||||||
|
|
||||||
// During SSR, the API base URL must be absolute (HttpClient runs in Node.js).
|
// During SSR, the API base URL must be absolute (HttpClient runs in Node.js).
|
||||||
@@ -19,6 +21,21 @@ const serverAppConfig = {
|
|||||||
{ provide: APP_ID, useValue: 'server' },
|
{ provide: APP_ID, useValue: 'server' },
|
||||||
{ provide: APP_CONFIG, useValue: ssrAppConfig },
|
{ provide: APP_CONFIG, useValue: ssrAppConfig },
|
||||||
provideServerRendering(withRoutes(serverRoutes)),
|
provideServerRendering(withRoutes(serverRoutes)),
|
||||||
|
// Block server rendering until station config is fetched from the API.
|
||||||
|
// This ensures SSR renders with real DB data (colors, assets, content)
|
||||||
|
// instead of DEFAULT_CONFIG baked at build time. In the browser, this
|
||||||
|
// is a no-op — config loads async in ngOnInit after first paint.
|
||||||
|
{
|
||||||
|
provide: APP_INITIALIZER,
|
||||||
|
multi: true,
|
||||||
|
deps: [StationConfigService, PLATFORM_ID],
|
||||||
|
useFactory: (svc: StationConfigService, platformId: object) => {
|
||||||
|
if (!isPlatformBrowser(platformId)) {
|
||||||
|
return () => svc.load().catch(() => {});
|
||||||
|
}
|
||||||
|
return () => {};
|
||||||
|
},
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user