Ship Angular SSR on Firebase Hosting (Angular 20+): Hydration Metrics, Bundle Budgets, and Functions Guardrails

The Real-World SSR Problem: Fast TTFB, Slow Hydration

Why Angular 20+ Teams Should Care About Hydration and Guardrails

Implement Firebase Hosting SSR with Cloud Functions v2

// firebase.json
{
  "hosting": {
    "public": "dist/browser",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {"source": "**/*.@(js|css)", "headers": [{"key": "Cache-Control", "value": "public,max-age=31536000,immutable"}]},
      {"source": "**/*.@(png|jpg|svg|webp)", "headers": [{"key": "Cache-Control", "value": "public,max-age=31536000,immutable"}]},
      {"source": "**", "headers": [{"key": "Cache-Control", "value": "no-store"}]}
    ],
    "rewrites": [{ "source": "**", "function": "ssr" }]
  }
}

// functions/src/index.ts
import { onRequest } from 'firebase-functions/v2/https';
import * as logger from 'firebase-functions/logger';

// Import your compiled SSR server entry (built via ng build --configuration=production && ng run app:server)
// The exported handler should accept (req, res) and render Angular via CommonEngine or your server module.
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { handleRequest } = require('../ssr/main');

export const ssr = onRequest({
  region: 'us-central1',
  memory: '512MiB',
  timeoutSeconds: 60,
  minInstances: 1,
  maxInstances: 10,
  concurrency: 40,
}, async (req, res) => {
  const start = Date.now();
  try {
    await handleRequest(req, res);
    const ms = Date.now() - start;
    logger.info('SSR render', { path: req.originalUrl, ms, status: res.statusCode });
  } catch (e) {
    logger.error('SSR error', { error: (e as Error).message, path: req.originalUrl });
    res.status(500).send('SSR error');
  }
});

// server/main.ts (simplified)
import 'zone.js/node';
import type { Request, Response } from 'express';
import { CommonEngine } from '@angular/ssr';
import { APP_BASE_HREF } from '@angular/common';
import { AppComponent } from './app/app.component';
import { provideServerRendering } from '@angular/platform-server';

const engine = new CommonEngine();

export async function handleRequest(req: Request, res: Response) {
  const html = await engine.render({
    bootstrap: AppComponent,
    providers: [
      provideServerRendering(),
      { provide: APP_BASE_HREF, useValue: req.baseUrl },
    ],
    url: req.originalUrl,
  });
  res.setHeader('Content-Type', 'text/html');
  res.status(200).send(html);
}

# .github/workflows/ci.yml (excerpt)
name: ci
on: [push, pull_request]
jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: corepack enable && pnpm i --frozen-lockfile
      - run: pnpm nx run-many -t lint,test --parallel=3
      - run: pnpm nx build app --configuration=production --stats-json
      - run: pnpm nx run app:server --configuration=production
      - name: Fail on bundle budget regressions
        run: node tools/verify-budgets.mjs dist/app/browser/stats.json
      - name: Deploy to preview channel
        run: |
          npm i -g firebase-tools
          firebase deploy --only hosting,functions:ssr --project ${{ secrets.FB_PROJECT }} --token ${{ secrets.FIREBASE_TOKEN }} --non-interactive

Measure Hydration in the Browser and Render Time on the Server

// main.client.ts (Angular 20+)
import { bootstrapApplication, ApplicationRef, provideClientHydration, afterNextRender } from '@angular/core';
import { AppComponent } from './app/app.component';

function reportHydration(duration: number) {
  const payload = JSON.stringify({ metric: 'hydrationMs', duration, ts: Date.now() });
  navigator.sendBeacon?.('/metrics', payload);
}

const start = performance.now();

bootstrapApplication(AppComponent, { providers: [provideClientHydration()] })
  .then(appRef => {
    const injector = (appRef as ApplicationRef).injector;
    afterNextRender(() => {
      // first stable frame after hydration
      const end = performance.now();
      reportHydration(end - start);
    });
  });

CI Bundle Budgets That Prevent Regressions

// angular.json (budgets excerpt)
{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "280kb", "maximumError": "320kb" },
                { "type": "anyComponentStyle", "maximumWarning": "8kb", "maximumError": "12kb" },
                { "type": "anyScript", "maximumWarning": "600kb", "maximumError": "700kb" },
                { "type": "any", "maximumWarning": "800kb", "maximumError": "900kb" }
              ]
            }
          }
        }
      }
    }
  }
}

Functions Guardrails: Region, Concurrency, and Cold Starts

// firebase.json (headers excerpt)
{
  "hosting": {
    "headers": [
      {"source": "**/*.@(js|css)", "headers": [{"key": "Cache-Control", "value": "public,max-age=31536000,immutable"}]},
      {"source": "**", "headers": [
        {"key": "Cache-Control", "value": "no-store"},
        {"key": "X-Content-Type-Options", "value": "nosniff"}
      ]}
    ]
  }
}

Example Results: IntegrityLens and Airline Kiosk

When to Hire an Angular Developer for Firebase SSR Delivery

Concise Takeaways and Next Steps

• Measure what matters: hydration p95 and SSR render p95.
• Guard what matters: budgets in CI and Functions limits.
• Ship safely: preview channels, Lighthouse checks, and zero‑downtime promotes.

If you’re ready to lock this down, review your build with me. See NG Wave component library for Signals-driven UI at ngwave.angularux.com and stabilize your Angular codebase with gitPlumbers code rescue. Then let’s ship your Firebase SSR with numbers you can show to leadership.