Fix TTFB in Angular

# 1. Add SSR to an existing Angular 17+ project
ng add @angular/ssr

# This creates:
#   server.ts          -- Express entry point
#   src/app/app.config.server.ts  -- server-specific providers
#   and updates angular.json with a server build target

// server.ts -- generated by ng add @angular/ssr, customise as needed
import 'zone.js/node';
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

export function app(): express.Express {
  const server = express();
  const serverDistFolder = dirname(fileURLToPath(import.meta.url));
  const browserDistFolder = resolve(serverDistFolder, '../browser');
  const indexHtml = join(serverDistFolder, 'index.server.html');

  const commonEngine = new CommonEngine();

  // Serve static assets with long cache
  server.get('*.*', express.static(browserDistFolder, {
    maxAge: '1y',
    immutable: true,
  }));

  // Render Angular app for all other routes
  server.get('*', (req, res, next) => {
    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${req.protocol}://${req.headers.host}${req.originalUrl}`,
        publicPath: browserDistFolder,
        providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
      })
      .then(html => {
        res.setHeader('Cache-Control', 'public, max-age=60, stale-while-revalidate=300');
        res.send(html);
      })
      .catch(err => next(err));
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4000;
  const server = app();
  server.listen(port, () =>
    console.log(`Node server listening on http://localhost:${port}`)
  );
}

run();

// product.service.ts
import { Injectable, inject, PLATFORM_ID } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TransferState, makeStateKey } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

export interface Product { id: number; name: string; price: number; }

const PRODUCTS_KEY = makeStateKey<Product[]>('products');

@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
  private transferState = inject(TransferState);
  private platformId = inject(PLATFORM_ID);

  getProducts(): Observable<Product[]> {
    // On the client, read from TransferState if server already fetched
    if (isPlatformBrowser(this.platformId)) {
      const cached = this.transferState.get<Product[]>(PRODUCTS_KEY, []);
      if (cached.length) {
        this.transferState.remove(PRODUCTS_KEY); // consume once
        return of(cached);
      }
    }

    // On the server (or on client if not cached): fetch from API
    return this.http.get<Product[]>('/api/products').pipe(
      tap(products => {
        // Store in TransferState so the client HTML receives it
        if (!isPlatformBrowser(this.platformId)) {
          this.transferState.set(PRODUCTS_KEY, products);
        }
      })
    );
  }
}

// app.config.ts -- enable HttpClient with fetch and transfer state support
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient, withFetch } from '@angular/common/http';
import { provideRouter } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter([]),
    // withFetch() uses the Fetch API and integrates with TransferState
    provideHttpClient(withFetch()),
  ],
};

// server-cache.interceptor.ts
import {
  HttpInterceptorFn, HttpRequest, HttpHandlerFn, HttpResponse
} from '@angular/common/http';
import { inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

// Module-level cache shared across requests on the same server instance
const serverCache = new Map<string, HttpResponse<unknown>>();
const CACHE_TTL_MS = 30_000; // 30 seconds
const cacheTimestamps = new Map<string, number>();

export const serverCacheInterceptor: HttpInterceptorFn = (
  req: HttpRequest<unknown>,
  next: HttpHandlerFn
) => {
  const platformId = inject(PLATFORM_ID);

  // Only cache GET requests on the server
  if (!isPlatformServer(platformId) || req.method !== 'GET') {
    return next(req);
  }

  const key = req.urlWithParams;
  const cached = serverCache.get(key);
  const ts = cacheTimestamps.get(key) ?? 0;

  if (cached && Date.now() - ts < CACHE_TTL_MS) {
    return of(cached.clone());
  }

  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        serverCache.set(key, event.clone());
        cacheTimestamps.set(key, Date.now());
      }
    })
  );
};

// app.config.server.ts -- register the interceptor for server builds
import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { appConfig } from './app.config';
import { serverCacheInterceptor } from './server-cache.interceptor';

const serverConfig: ApplicationConfig = {
  providers: [
    provideServerRendering(),
    provideHttpClient(withInterceptors([serverCacheInterceptor])),
  ],
};

export const config = mergeApplicationConfig(appConfig, serverConfig);

// vercel.json -- deploy Angular Universal to Vercel Edge Network
{
  "buildCommand": "ng build --configuration production",
  "outputDirectory": "dist/my-app/browser",
  "framework": "angular",
  "rewrites": [
    { "source": "/(.*)", "destination": "/api/ssr" }
  ]
}

// api/ssr.ts -- Vercel serverless function wrapping CommonEngine
import type { VercelRequest, VercelResponse } from '@vercel/node';
import { CommonEngine } from '@angular/ssr';
import { APP_BASE_HREF } from '@angular/common';
import bootstrap from '../src/main.server';
import { join } from 'node:path';

const engine = new CommonEngine();

export default async function handler(req: VercelRequest, res: VercelResponse) {
  const html = await engine.render({
    bootstrap,
    documentFilePath: join(process.cwd(), 'dist/my-app/browser/index.html'),
    url: `https://${req.headers.host}${req.url}`,
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
  });
  res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=300');
  res.setHeader('Content-Type', 'text/html');
  res.status(200).send(html);
}

// server.ts -- comprehensive Cache-Control setup
import express from 'express';
import { join } from 'node:path';

export function app(): express.Express {
  const server = express();
  const browserDistFolder = join(process.cwd(), 'dist/my-app/browser');

  // Hashed JS/CSS/fonts -- immutable, cache forever
  server.get('*.{js,css,woff2,woff,ttf}',
    express.static(browserDistFolder, {
      maxAge: '1y',
      immutable: true,
      // Emits: Cache-Control: public, max-age=31536000, immutable
    })
  );

  // Images -- cache 30 days, allow revalidation
  server.get('*.{png,jpg,jpeg,webp,avif,svg}',
    express.static(browserDistFolder, {
      maxAge: '30d',
      // Emits: Cache-Control: public, max-age=2592000
    })
  );

  // SSR HTML -- short cache with stale-while-revalidate
  server.get('*', (req, res, next) => {
    if (req.path.startsWith('/api/')) return next();
    // renderWithCommonEngine(req, res) would go here
    res.setHeader(
      'Cache-Control',
      'public, max-age=30, stale-while-revalidate=300, stale-if-error=86400'
    );
    // ... call CommonEngine.render() and send HTML ...
    next();
  });

  // API proxy responses -- cache based on data freshness requirements
  server.get('/api/products', (_req, res, next) => {
    res.setHeader('Cache-Control', 'public, max-age=60, stale-while-revalidate=600');
    next();
  });

  return server;
}