6 - Angular SSR e Incremental Hydration

# Nuovo progetto con SSR abilitato
ng new my-ssr-app --ssr

# Aggiungere SSR a un progetto esistente
ng add @angular/ssr

# Il comando genera automaticamente:
# - server.ts (Express server)
# - src/app/app.config.server.ts (configurazione server)
# - Aggiorna angular.json con target "server"
    

// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),

    // Abilita la hydration non-destructive
    provideClientHydration(),
  ]
};
    

<!-- Questa sezione viene renderizzata sul server ma idratata
     solo quando entra nel viewport dell'utente -->
@defer (hydrate on viewport) {
  <app-product-list [category]="selectedCategory" />
}

<!-- Questo componente viene idratato quando l'utente
     interagisce con esso (click, focus, hover) -->
@defer (hydrate on interaction) {
  <app-comment-section [postId]="post.id" />
}

<!-- Questo viene idratato quando il browser e idle,
     cioe non sta eseguendo altri task -->
@defer (hydrate on idle) {
  <app-sidebar-recommendations />
}

<!-- Questo viene idratato dopo un timer specifico -->
@defer (hydrate on timer(3s)) {
  <app-analytics-widget />
}

<!-- Mai idratato: resta HTML statico per sempre -->
@defer (hydrate never) {
  <app-static-footer />
}

<!-- Idratato immediatamente (equivale a full hydration) -->
@defer (hydrate on immediate) {
  <app-critical-cta />
}
    

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import {
  provideClientHydration,
  withIncrementalHydration
} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // Abilita hydration con supporto incrementale
    provideClientHydration(
      withIncrementalHydration()
    ),
  ]
};
    

// src/app/app.config.server.ts
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { provideServerRoutesConfig } from '@angular/ssr';
import { appConfig } from './app.config';
import { serverRoutes } from './app.routes.server';

const serverConfig: ApplicationConfig = {
  providers: [
    // Abilita il rendering lato server
    provideServerRendering(),

    // Configurazione route-level rendering
    provideServerRoutesConfig(serverRoutes),
  ]
};

// Merge della config client con quella server
export const config = mergeApplicationConfig(appConfig, serverConfig);
    

// src/app/app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: '',
    renderMode: RenderMode.Prerender,  // SSG: generato al build time
  },
  {
    path: 'blog',
    renderMode: RenderMode.Prerender,  // Pagina statica
  },
  {
    path: 'blog/:slug',
    renderMode: RenderMode.Server,  // SSR: generato ad ogni richiesta
  },
  {
    path: 'dashboard',
    renderMode: RenderMode.Client,  // CSR: solo lato client
  },
  {
    path: '**',
    renderMode: RenderMode.Server,  // Default: SSR per tutto il resto
  },
];
    

// server.ts
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr/node';
import express from 'express';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
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 file statici dalla cartella browser
  server.get('*.*', express.static(browserDistFolder, {
    maxAge: '1y',   // Cache aggressiva per asset statici
    index: false,
  }));

  // Tutte le altre route passano per Angular SSR
  server.get('**', (req, res, next) => {
    const { protocol, originalUrl, baseUrl, headers } = req;

    commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: browserDistFolder,
        providers: [
          { provide: APP_BASE_HREF, useValue: baseUrl }
        ],
      })
      .then(html => 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(`Server SSR in ascolto su http://localhost:${port}`);
  });
}

run();
    

// app.config.ts
import {
  provideClientHydration,
  withEventReplay,
  withIncrementalHydration
} from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(
      // Event Replay: cattura gli eventi durante la hydration
      withEventReplay(),
      // Incremental Hydration: hydrate on demand
      withIncrementalHydration(),
    ),
  ]
};
    

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // Pagine statiche: generate al build time
  {
    path: '',
    renderMode: RenderMode.Prerender,
  },
  {
    path: 'about',
    renderMode: RenderMode.Prerender,
  },

  // Route parametriche: elenco esplicito di path
  {
    path: 'blog/:slug',
    renderMode: RenderMode.Prerender,
    async getPrerenderParams() {
      // Restituisce un array di oggetti con i parametri
      return [
        { slug: 'angular-ssr-hydration' },
        { slug: 'angular-signals-guida' },
        { slug: 'zoneless-change-detection' },
      ];
    },
  },

  // Route dinamiche: SSR a runtime
  {
    path: 'product/:id',
    renderMode: RenderMode.Server,
  },

  // Dashboard: solo client-side
  {
    path: 'admin/**',
    renderMode: RenderMode.Client,
  },
];
    

// seo.service.ts
import { Injectable, inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class SeoService {
  private title = inject(Title);
  private meta = inject(Meta);
  private document = inject(DOCUMENT);

  updatePageMeta(config: {
    title: string;
    description: string;
    url: string;
    image?: string;
    type?: string;
  }): void {
    // Title tag
    this.title.setTitle(config.title);

    // Meta description
    this.meta.updateTag({
      name: 'description',
      content: config.description
    });

    // Open Graph tags
    this.meta.updateTag({ property: 'og:title', content: config.title });
    this.meta.updateTag({ property: 'og:description', content: config.description });
    this.meta.updateTag({ property: 'og:url', content: config.url });
    this.meta.updateTag({ property: 'og:type', content: config.type || 'website' });

    if (config.image) {
      this.meta.updateTag({ property: 'og:image', content: config.image });
    }

    // Twitter Card
    this.meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this.meta.updateTag({ name: 'twitter:title', content: config.title });
    this.meta.updateTag({ name: 'twitter:description', content: config.description });

    // Canonical URL
    this.setCanonicalUrl(config.url);
  }

  addStructuredData(data: object): void {
    const script = this.document.createElement('script');
    script.type = 'application/ld+json';
    script.textContent = JSON.stringify(data);
    this.document.head.appendChild(script);
  }

  private setCanonicalUrl(url: string): void {
    let link: HTMLLinkElement | null =
      this.document.querySelector('link[rel="canonical"]');
    if (!link) {
      link = this.document.createElement('link');
      link.setAttribute('rel', 'canonical');
      this.document.head.appendChild(link);
    }
    link.setAttribute('href', url);
  }
}
    

// In un componente articolo blog
@Component({ /* ... */ })
export class ArticlePageComponent {
  private seo = inject(SeoService);

  ngOnInit(): void {
    const article = this.articleData();

    this.seo.updatePageMeta({
      title: `${article.title} | Federico Calo`,
      description: article.summary,
      url: `https://federicocalo.dev/blog/${article.slug}`,
      image: 'https://federicocalo.dev/assets/og-image.jpg',
      type: 'article',
    });

    // Structured Data per Google
    this.seo.addStructuredData({
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: article.title,
      description: article.summary,
      author: {
        '@type': 'Person',
        name: 'Federico Calo',
        url: 'https://federicocalo.dev',
      },
      datePublished: article.date,
      image: 'https://federicocalo.dev/assets/og-image.jpg',
      publisher: {
        '@type': 'Organization',
        name: 'Federico Calo Dev',
        url: 'https://federicocalo.dev',
      },
    });
  }
}
    

import { Component, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-analytics',
  standalone: true,
  template: `<div #trackingContainer></div>`
})
export class AnalyticsComponent {
  private platformId = inject(PLATFORM_ID);

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // Sicuro: eseguito solo nel browser
      this.initGoogleAnalytics();
      this.trackPageView();
    }

    if (isPlatformServer(this.platformId)) {
      // Eseguito solo sul server
      console.log('Rendering lato server per:', this.route);
    }
  }

  private initGoogleAnalytics(): void {
    // Accesso sicuro a window e document
    const gtag = (window as any).gtag;
    if (gtag) {
      gtag('config', 'G-XXXXXXXXXX');
    }
  }

  private trackPageView(): void {
    // localStorage disponibile solo nel browser
    const views = localStorage.getItem('pageViews') || '0';
    localStorage.setItem('pageViews', String(Number(views) + 1));
  }
}
    

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

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[]> {
    // 1. Controlla se i dati sono già nel TransferState
    const cached = this.transferState.get(PRODUCTS_KEY, null);
    if (cached) {
      // Dati trasferiti dal server: usali e rimuovili
      this.transferState.remove(PRODUCTS_KEY);
      return of(cached);
    }

    // 2. Nessun dato in cache: fai la richiesta HTTP
    return this.http.get<Product[]>('/api/products').pipe(
      tap(products => {
        if (isPlatformServer(this.platformId)) {
          // 3. Sul server: salva nel TransferState
          this.transferState.set(PRODUCTS_KEY, products);
        }
      })
    );
  }
}
    

import { Component, afterNextRender, afterRender, ElementRef, viewChild } from '@angular/core';

@Component({
  selector: 'app-chart',
  standalone: true,
  template: `<canvas #chartCanvas width="800" height="400"></canvas>`
})
export class ChartComponent {
  canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('chartCanvas');

  constructor() {
    // Eseguito UNA VOLTA dopo il primo render nel browser
    // NON eseguito sul server
    afterNextRender(() => {
      const ctx = this.canvas().nativeElement.getContext('2d');
      this.initChart(ctx!);
    });

    // Eseguito OGNI VOLTA che Angular rende il componente
    // Utile per sincronizzare con librerie DOM esterne
    afterRender(() => {
      this.updateChartDimensions();
    });
  }

  private initChart(ctx: CanvasRenderingContext2D): void {
    // Inizializza un chart con Canvas API
    // Sicuro: eseguito solo nel browser
  }

  private updateChartDimensions(): void {
    // Aggiorna dimensioni basate sul viewport
  }
}
    

<!-- Layout pagina prodotto ottimizzato per Core Web Vitals -->

<!-- CRITICO: hydration immediata (above-the-fold) -->
<app-navbar />
<app-product-hero [product]="product()" />

<!-- VISIBILITA: hydration su viewport -->
@defer (hydrate on viewport) {
  <app-product-details [product]="product()" />
}

@defer (hydrate on viewport) {
  <app-product-reviews [productId]="product().id" />
}

<!-- INTERAZIONE: hydration su input utente -->
@defer (hydrate on interaction) {
  <app-add-to-cart [product]="product()" />
}

<!-- BACKGROUND: hydration quando il browser e libero -->
@defer (hydrate on idle) {
  <app-related-products [categoryId]="product().categoryId" />
}

<!-- DIFFERITO: hydration dopo timer -->
@defer (hydrate on timer(5s)) {
  <app-user-tracking [productId]="product().id" />
}

<!-- STATICO: mai idratato -->
@defer (hydrate never) {
  <app-footer />
}
    

// performance-monitor.service.ts
import { Injectable, inject, PLATFORM_ID, afterNextRender } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class PerformanceMonitorService {
  private platformId = inject(PLATFORM_ID);

  constructor() {
    afterNextRender(() => {
      this.observeWebVitals();
    });
  }

  private observeWebVitals(): void {
    if (!isPlatformBrowser(this.platformId)) return;

    // Largest Contentful Paint
    const lcpObserver = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1];
      console.log('LCP:', lastEntry.startTime, 'ms');
    });
    lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

    // First Input Delay
    const fidObserver = new PerformanceObserver((list) => {
      const entries = list.getEntries() as PerformanceEventTiming[];
      entries.forEach(entry => {
        console.log('FID:', entry.processingStart - entry.startTime, 'ms');
      });
    });
    fidObserver.observe({ type: 'first-input', buffered: true });

    // Cumulative Layout Shift
    const clsObserver = new PerformanceObserver((list) => {
      let clsScore = 0;
      list.getEntries().forEach((entry: any) => {
        if (!entry.hadRecentInput) {
          clsScore += entry.value;
        }
      });
      console.log('CLS:', clsScore);
    });
    clsObserver.observe({ type: 'layout-shift', buffered: true });
  }
}