Ship Angular SSR on Firebase Hosting with Hydration Metrics, Bundle Budgets, and Functions Guardrails

Why Angular SSR on Firebase fails without guardrails

Deploy Angular 20 SSR to Firebase Hosting + Functions v2

# Angular 20+
ng add @angular/ssr
ng run app:build:production
ng run app:server:production

// angular.json (snippet)
{
  "projects": {
    "app": {
      "architect": {
        "build": { "options": { "outputPath": "dist/app/browser" } },
        "server": { "options": { "outputPath": "dist/app/server" } }
      }
    }
  }
}

// firebase.json (snippet)
{
  "hosting": {
    "public": "dist/app/browser",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      { "source": "**", "function": { "functionId": "ssrApp", "region": "us-central1" } }
    ]
  },
  "functions": { "source": "functions" }
}

// functions/src/index.ts (Functions v2)
import * as path from 'node:path';
import { onRequest } from 'firebase-functions/v2/https';
import { setGlobalOptions } from 'firebase-functions/v2';
setGlobalOptions({ region: 'us-central1' });

export const ssrApp = onRequest(
  {
    cpu: 1,
    memory: '512MiB',
    timeoutSeconds: 60,
    minInstances: 1,     // avoid cold starts during office hours
    maxInstances: 100,
    concurrency: 80,
  },
  async (req, res) => {
    // Basic origin guardrail; prefer Cloud Armor for stricter rules
    const host = req.headers['x-forwarded-host'] || req.headers.host;
    if (!String(host).includes('web.app') && !String(host).includes('firebaseapp.com') && !String(host).includes('yourdomain.com')) {
      res.status(403).send('Forbidden');
      return;
    }

    // Cache for CDN; tune per route
    res.setHeader('Cache-Control', 'public, max-age=0, s-maxage=300, stale-while-revalidate=60');
    res.setHeader('Vary', 'Accept-Encoding, Cookie');

    const entry = path.join(process.cwd(), '../dist/app/server/server.mjs');
    const { app } = await import(entry); // app is an Express-style handler exported by Angular server build
    return app(req, res);
  }
);

Measure hydration like a budget

// src/main.ts
import { bootstrapApplication, ApplicationRef } from '@angular/platform-browser';
import { provideClientHydration } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { filter, take } from 'rxjs/operators';

function sendToGA4(name: string, params: Record<string, any>) {
  if ((window as any).gtag) {
    (window as any).gtag('event', name, params);
  }
}

performance.mark('hydration-start');
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(),
    // ...other providers (SignalStore, HTTP, etc.)
  ]
}).then((appRef: ApplicationRef) => {
  appRef.isStable.pipe(filter(Boolean), take(1)).subscribe(() => {
    performance.mark('hydrration-end');
    performance.measure('ng-hydration', 'hydration-start', 'hydration-end');
    const [m] = performance.getEntriesByName('ng-hydration');
    const duration = Math.round(m?.duration ?? 0);

    sendToGA4('hydration_complete', {
      duration_ms: duration,
      route: location.pathname,
      build: (window as any).__BUILD_ID__ || 'local'
    });
  });
});

Tip: Also track a “hydration_interaction_inp” using the web-vitals library after the first click. It correlates strongly with perceived snappiness in PrimeNG-heavy UIs.

Enforce bundle budgets before they hit users

// angular.json budgets (production)
{
  "budgets": [
    { "type": "initial", "maximumWarning": "220kb", "maximumError": "240kb" },
    { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "8kb" },
    { "type": "anyScript", "maximumWarning": "2mb", "maximumError": "2.5mb" }
  ]
}

# .github/workflows/ci.yml (snippet)
name: ci
on: [push, pull_request]
jobs:
  build-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx run-many -t build --configuration=production
      - run: npx nx run app:server --configuration=production
      - name: Enforce budgets
        run: |
          npx ng build --configuration=production --output-hashing=all --verbose || exit 1
  preview-deploy:
    needs: build-test
    runs-on: ubuntu-latest
    if: ${{ github.event_name == 'pull_request' }}
    steps:
      - uses: actions/checkout@v4
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: your-firebase-project
          channelId: pr-${{ github.event.number }}
  prod-deploy:
    needs: build-test
    if: startsWith(github.ref, 'refs/tags/v')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Block if hydration p95 > 1200ms (example check)
        run: node scripts/check-hydration-threshold.js 1200
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT }}
          projectId: your-firebase-project
          channelId: live

Functions guardrails that keep SSR stable

// functions/src/index.ts (guardrail details)
import fetch, { RequestInit } from 'node-fetch';

async function fetchWithBudget(url: string, init: RequestInit, budgetMs = 800) {
  const ac = new AbortController();
  const t = setTimeout(() => ac.abort(), budgetMs);
  try {
    return await fetch(url, { ...init, signal: ac.signal });
  } finally {
    clearTimeout(t);
  }
}

export const ssrApp = onRequest({ minInstances: 2, memory: '512MiB', concurrency: 80 }, async (req, res) => {
  const reqId = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
  res.setHeader('X-Request-Id', reqId);

  // Example: fetch data with a tight SSR budget
  const api = await fetchWithBudget('https://api.yourdomain.com/dashboard', { headers: { 'x-req-id': reqId } }, 700);
  // ...render Angular server app with data...
});

Hydration-safe UI practices (PrimeNG, D3/Highcharts)

<!-- Example: chart that re-renders client-side only -->
<p-chart ngSkipHydration [type]="'line'" [data]="chartData()" *ngIf="ready()"></p-chart>

// Signal-driven readiness after app is stable
import { signal, effect, inject } from '@angular/core';
import { ApplicationRef } from '@angular/core';

export class DashboardComponent {
  private appRef = inject(ApplicationRef);
  ready = signal(false);
  chartData = signal<any>(null);

  constructor() {
    const sub = this.appRef.isStable.subscribe(stable => {
      if (stable) {
        this.ready.set(true);
        sub.unsubscribe();
      }
    });
  }
}

When to Hire an Angular Developer for Legacy Rescue

How an Angular Consultant Approaches SSR + Hydration Migration

Concise takeaways and next steps

Questions I get about Angular SSR on Firebase