Compare commits

...
2 Commits
Author SHA1 Message Date
kfj001 96011ef200 Merge pull request 'fix(ssr): fetch station config during server-side rendering' (#10) from bugfix/ssr-fetch-config-on-server into main
CI Pipeline / backend-test (push) Successful in 5m3s
CI Pipeline / frontend-test (push) Successful in 22s
CI Pipeline / frontend-build (push) Successful in 29s
CI Pipeline / backend-lint (push) Successful in 9s
CI Pipeline / quality-gate (push) Successful in 2s
Reviewed-on: http://192.168.1.74:30008/kfj001/kmtnflower/pulls/10
Reviewed-by: kfj001 <kfj001@gmail.com>
2026-08-08 08:03:52 -07:00
robot 54bd869042 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
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.
2026-08-08 12:10:05 +00:00
2 changed files with 25 additions and 5 deletions

No files matched your search

+7 -4
View File
@@ -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
View File
@@ -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 () => {};
},
},
], ],
}; };