Server-side rendering in Angular

Un tempo le applicazioni web venivano renderizzate dal server.

E parliamo dei siti fatti interamenti in PHP, .NET, ecc.

Poi, con l'avvento di Angular, React, ecc..., la redenrizzazione grafica è stata demandata al client.

Infine, la nuova moda pare essere fare il Server-side rendering (SSR) su Angular and company.

In questo articolo vediamo come possiamo fare in Angular.

La cosa principale è dare questo comando, che si occuperà quasi di tutto:

ng add @nguniversal/express-engine

Questo comando fa varie cose:

• aggiorna le dipendenza da installare
• crea un file app.server.module.ts
• crea un file main.server.ts
• crea un file server.ts
• aggiorna i file angular.json e ad altri

Inoltre, sempre nel package.json, vengono aggiunti questi scripts:

"dev:ssr": "ng run test-angular:serve-ssr",
"serve:ssr": "node dist/test-angular/server/main.js",
"build:ssr": "ng build && ng run test-angular:server",
"prerender": "ng run test-angular:prerender"

L'unica cosa che dobbiamo fare noi è aggiungere un provider al file app.module.ts:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {provideClientHydration} from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [provideClientHydration()],
  bootstrap: [AppComponent]
})

export class AppModule {
}

A questo punto possiamo testare l'SSR lanciando questo script:

npm run dev:ssr

Se andate a vedere bene, questo script lancia server.ts.

Per capire meglio tutto il giro, andatevi a leggere il codice di questo file!

Enjoy!