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

A real-world SSR scene—and why your numbers matter

As companies plan 2025 Angular roadmaps, SSR is table stakes. The edge is reliability: numbers you can defend in a release meeting and a switch you can flip if production wobbles.

Why Angular SSR on Firebase needs metrics and guardrails

Architecture: Angular 20+ SSR on Firebase Hosting + Functions

Example firebase.json and Functions handler:

Firebase config and Functions SSR handler

{
  "hosting": {
    "public": "dist/apps/web/browser",
    "cleanUrls": true,
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "/assets/**",
        "headers": [{ "key": "Cache-Control", "value": "public,max-age=31536000,immutable" }]
      },
      {
        "source": "/**/*.@(js|css)",
        "headers": [{ "key": "Cache-Control", "value": "public,max-age=31536000,immutable" }]
      }
    ],
    "rewrites": [{ "source": "**", "function": "ssr" }]
  },
  "functions": {
    "source": "functions",
    "runtime": "nodejs20"
  }
}

// functions/src/index.ts
import { onRequest } from 'firebase-functions/v2/https';
import { logger } from 'firebase-functions';
import type { Request, Response } from 'express';

// Lazy import to avoid cold start penalties when not receiving traffic
let expressApp: any;
async function getApp() {
  if (!expressApp) {
    // Compiled server bundle built by Angular (e.g., dist/apps/web/server/main.mjs)
    // Export should provide an Express handler (app) or a function(req,res)
    const { app } = await import('./ssr/express-app.js');
    expressApp = app;
  }
  return expressApp;
}

export const ssr = onRequest(
  {
    region: 'us-central1',
    memory: '1GiB',
    timeoutSeconds: 60,
    maxInstances: 10,
    invoker: 'public',
  },
  async (req: Request, res: Response) => {
    // Guardrails
    if (req.method !== 'GET') return res.status(405).send('Method Not Allowed');
    if ((req.headers['content-length'] || '0') > '0') return res.status(400).send('No Body Allowed');

    // Minimal rate-limit (per IP burst guard)
    // For serious traffic, front with CDN rules or add a cache layer.
    res.setHeader('X-Frame-Options', 'DENY');
    res.setHeader('X-Content-Type-Options', 'nosniff');

    try {
      const app = await getApp();
      return app(req, res);
    } catch (e: any) {
      logger.error('SSR render error', { message: e?.message, stack: e?.stack });
      return res.status(500).send('SSR Error');
    }
  }
);

Instrument hydration and Core Web Vitals

// src/main.ts
import { ApplicationRef, enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideClientHydration } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { getAnalytics, logEvent, isSupported } from 'firebase/analytics';

performance.mark('ng_hydration_start');

bootstrapApplication(AppComponent, {
  providers: [provideClientHydration()],
}).then((appRef: ApplicationRef) => {
  const sub = appRef.isStable.subscribe(async (stable) => {
    if (stable) {
      sub.unsubscribe();
      performance.mark('ng_hydration_end');
      performance.measure('ng_hydration', 'ng_hydration_start', 'ng_hydration_end');
      const measure = performance.getEntriesByName('ng_hydration')[0];
      if (await isSupported()) {
        const analytics = getAnalytics();
        logEvent(analytics, 'hydration_complete', {
          value: Math.round(measure.duration),
          page_path: location.pathname,
        });
      }
    }
  });

  // LCP (largest contentful paint)
  const po = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // @ts-ignore
      if (entry.name === 'largest-contentful-paint') {
        // Ship to analytics backend
      }
    }
  });
  po.observe({ type: 'largest-contentful-paint', buffered: true as any });
});

// Example: using TransferState with Signals/SignalStore for above-the-fold data
import { inject, computed, signal } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';

const HERO_KEY = makeStateKey<any>('hero');

export class HeroStore {
  private ts = inject(TransferState);
  private heroS = signal(this.ts.get(HERO_KEY, null));
  hero = computed(() => this.heroS());
}

Enforce Angular bundle budgets and CI blockers

// angular.json (browser options)
{
  "configurations": {
    "production": {
      "budgets": [
        { "type": "initial", "maximumWarning": "250kb", "maximumError": "300kb" },
        { "type": "anyComponentStyle", "maximumWarning": "4kb", "maximumError": "6kb" },
        { "type": "anyScript", "maximumWarning": "150kb", "maximumError": "200kb" }
      ]
    }
  }
}

Functions guardrails that keep SSR stable

// functions/src/ssr/express-app.ts (sketch)
import express from 'express';
import compression from 'compression';
import { createCommonEngine } from '@angular/ssr';
import { fileURLToPath } from 'node:url';
import { dirname, join } from 'node:path';

const app = express();
app.use(compression());
app.disable('x-powered-by');

const engine = createCommonEngine();
const distFolder = join(dirname(fileURLToPath(import.meta.url)), '../ssr-dist');

app.get('*', async (req, res) => {
  const start = Date.now();
  try {
    const html = await engine.render({
      documentFilePath: join(distFolder, 'index.server.html'),
      url: req.originalUrl,
    });
    res.set('Cache-Control', 'no-store');
    res.status(200).send(html);
  } catch (e) {
    const ms = Date.now() - start;
    console.error('SSR_ERROR', { url: req.originalUrl, ms, message: (e as any)?.message });
    res.status(500).send('SSR Error');
  }
});

export { app };

CI/CD with Nx, GitHub Actions, and preview channels

# .github/workflows/ssr-firebase.yml
name: SSR Deploy (Preview)

on:
  pull_request:
    branches: [ main ]

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npx nx run-many -t build --configuration=production
      - name: Deploy to Firebase preview channel
        run: |
          npm i -g firebase-tools
          firebase hosting:channel:deploy pr-$GITHUB_RUN_NUMBER --json > out.json
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
      - name: Extract preview URL
        id: preview
        run: echo "url=$(jq -r '.result[0].url' out.json)" >> $GITHUB_OUTPUT
      - name: Lighthouse CI
        run: |
          npm i -g @lhci/cli
          lhci autorun --collect.url=${{ steps.preview.outputs.url }} --assert.preset=lighthouse:recommended
      - name: Budget build check
        run: npx ng build --configuration=production --output-hashing=all

When to hire an Angular developer for SSR and hydration rescue

Outcomes and what to instrument next