A jittery landing and the fix: SSR is not “done” until hydration is measured

I’ve seen this across telecom analytics and airport kiosks: SSR masks interactivity issues. Hydration metrics plus bundle budgets prevent those surprises. This guide shows the exact Firebase + Angular setup I deploy.

Why Angular SSR on Firebase Hosting needs metrics and guardrails in 2025

If you’re evaluating an Angular consultant, ask for their hydration metric and CI budget story. This is mine—battle‑tested on Angular 20+, Nx, and Firebase.

Step-by-step: Configure Angular 20+ SSR with Firebase Hosting and Functions v2

bash
ng add @angular/ssr --project my-app

Verify builds

npm run build:ssr # or: ng run my-app:build:ssr

typescript
// server.ts (generated, trimmed)
import 'zone.js/node';
import express from 'express';
import { CommonEngine } from '@angular/ssr';
import { APP_BASE_HREF } from '@angular/common';
import bootstrap from './src/main.server';
import { join } from 'node:path';

const app = express();
const distFolder = join(process.cwd(), 'dist/my-app/browser');
const engine = new CommonEngine();

app.get('*', async (req, res) => {
try {
const html = await engine.render({
bootstrap,
documentFilePath: join(distFolder, 'index.html'),
url: req.originalUrl,
providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
});
res.setHeader('Cache-Control', 'public, max-age=0, s-maxage=600');
res.status(200).send(html);
} catch (e) {
// Fallback to static shell on SSR error
res.status(200).sendFile(join(distFolder, 'index.html'));
}
});
export default app;

json
// firebase.json
{
"hosting": {
"public": "dist/my-app/browser",
"ignore": ["firebase.json", "/.*", "/node_modules/"],
"rewrites": [{ "source": "", "function": { "functionId": "ssr", "region": "us-central1" } }]
}
}

typescript
// functions/src/index.ts (Functions v2 HTTPS)
import { onRequest } from 'firebase-functions/v2/https';
import * as logger from 'firebase-functions/logger';
import app from '../../dist/my-app/server/server.mjs';

export const ssr = onRequest({
region: 'us-central1',
memory: '1GiB',
timeoutSeconds: 60,
minInstances: 1, // avoid cold starts on peak
maxInstances: 20, // cap cost
concurrency: 80 // Node 20 can multiplex
}, (req, res) => {
logger.log('SSR', { url: req.originalUrl });
app(req, res);
});

Instrument hydration metrics you can defend in post‑mortems

html

typescript
// main.client.ts
import { bootstrapApplication, ApplicationRef } from '@angular/platform-browser';
import { first } from 'rxjs/operators';
import { AppComponent } from './app/app.component';

// Optional: Firebase Analytics
import { initializeApp } from 'firebase/app';
import { getAnalytics, logEvent } from 'firebase/analytics';

const fb = initializeApp({ /* your keys */ });
const analytics = getAnalytics(fb);

bootstrapApplication(AppComponent)
.then((appRef: ApplicationRef) => {
appRef.isStable.pipe(first(Boolean)).subscribe(() => {
performance.mark('hydration-end');
const [m] = performance.measure('hydration', 'hydration-start', 'hydration-end');
const duration = Math.round(m.duration);
// Capture bundle size if you expose it at build time
const bundleKb = (window as any).BUNDLE_KB ?? 0;
logEvent(analytics, 'hydration', {
ms: duration,
route: location.pathname,
bundle_kb: bundleKb
});
});
});

yaml

Example GA4 BigQuery p95 query sketch

SELECT
APPROX_QUANTILES(CAST(e.value.int_value AS INT64), 100)[OFFSET(95)] AS hydration_ms_p95,
event_params.value.string_value AS route
FROM your_project.analytics_*.events_*, UNNEST(event_params) AS e
WHERE event_name = 'hydration' AND e.key = 'ms'
GROUP BY route
ORDER BY hydration_ms_p95 DESC;

Enforce Angular bundle budgets in CI to prevent regressions

json
// angular.json (browser target)
{
"projects": {
"my-app": {
"architect": {
"build": {
"configurations": {
"production": {
"budgets": [
{ "type": "initial", "maximumWarning": "180kb", "maximumError": "200kb" },
{ "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" },
{ "type": "anyScript", "maximumWarning": "300kb", "maximumError": "400kb" }
]
}
}
}
}
}
}
}

yaml

.github/workflows/ci.yml (preview channel + budgets)

name: ci
on: [pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npm run build:prod # runs ng build -c production (budgets enforced)
- name: Deploy preview
if: success()
run: |
npm i -g firebase-tools
firebase hosting:channel:deploy pr-${{ github.event.number }} --expires 7d --only hosting

Functions guardrails: memory, timeouts, concurrency, and SSR fallbacks

typescript
// functions/src/index.ts (v2 options shown earlier)
export const ssr = onRequest({
region: 'us-central1',
memory: '1GiB',
timeoutSeconds: 60,
minInstances: 1,
maxInstances: 20,
concurrency: 80
}, (req, res) => app(req, res));

// In server.ts route
type AnyError = unknown;
app.get('', async (req, res) => {
try { / render */ } catch (e: AnyError) {
res.setHeader('Cache-Control', 'public, max-age=0, s-maxage=60');
res.status(200).sendFile(join(distFolder, 'index.html'));
}
});

Production settings I use on PrimeNG dashboards and Nx monorepos

bash

Nx scripts (package.json)

"scripts": {
"build:prod": "ng build my-app -c production && ng run my-app:server",
"serve:ssr": "node dist/my-app/server/server.mjs",
"deploy": "firebase deploy --only hosting,functions"
}

typescript
// Defer heavy widgets (Angular 20+)
// dashboard.component.html

When to hire an Angular developer for legacy rescue

If your team needs to stabilize SSR, enforce budgets, or wire up metrics, let’s talk. See NG Wave components and Signals examples at the NG Wave component library, and code rescue capabilities at gitPlumbers code rescue.

Key takeaways and next steps

SSR that’s not measured isn’t production‑ready. Add hydration metrics, enforce budgets, and cap Functions. Ship via preview channels; promote only on green.

Next: add automated Lighthouse CI, error-rate SLOs, and feature‑flagged experiments via Firebase Remote Config. If you need an Angular expert to implement this, reach out.

FAQs: Angular SSR on Firebase Hosting