Angular Academy · Lezione

Configurare l'SSR di Angular

Aggiungere l'SSR con Angular CLI

Configurare l'SSR di Angular è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Aggiungere SSR

Il modo più rapido per abilitare SSR consiste nell'usare lo schematic ng add @angular/ssr. Questo configura automaticamente la build del server, un server basato su Express e l'idratazione.

// terminal
// ng add @angular/ssr

Nuovi progetti

Quando crea una nuova app, può scegliere direttamente l'opzione SSR, così il progetto sarà pronto per SSR fin dall'inizio.

// ng new my-app --ssr

Cosa aggiunge lo schematic

Aggiunge un server.ts (server Express), un bootstrap main.server.ts, un app.config.server.ts, aggiorna angular.json con le opzioni del server e abilita l'idratazione nella configurazione dell'app.

provideServerRendering

La configurazione dell'applicazione server fornisce il motore SSR tramite provideServerRendering(), integrandolo con la configurazione del browser.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Idratazione sul client

La configurazione del browser abilita l'idratazione, così il client riutilizza l'HTML del server invece di renderizzarlo nuovamente. Lo schematic aggiunge questa configurazione automaticamente.

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

export const appConfig = {
  providers: [provideClientHydration()]
};

Il server Express

server.ts crea un'app Express che serve gli asset statici e delega il rendering dell'HTML al motore SSR di Angular per tutte le altre route.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Server di sviluppo

Durante lo sviluppo, ng serve esegue automaticamente SSR con l'application builder, così può visualizzare l'output renderizzato dal server e l'idratazione senza passaggi aggiuntivi.

// ng serve

Build per la produzione

Una build di produzione genera un bundle browser e un bundle server. Per fornire SSR in produzione, esegua l'entry point del server Node.

// ng build
// node dist/my-app/server/server.mjs

API disponibili solo nel browser

Il codice viene eseguito anche sul server, dove window, document e localStorage non esistono. Protegga l'accesso a queste API, altrimenti SSR andrà in errore.

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

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

URL assoluti per HTTP

Sul server, gli URL relativi delle API non hanno un'origine. Utilizzi URL assoluti o configuri una base, in modo che le chiamate a HttpClient lato server vengano risolte correttamente.

Verificare il funzionamento di SSR

Per verificare SSR, richieda una pagina e analizzi la risposta grezza, ad esempio con curl. Nell'HTML dovrebbe vedere il contenuto renderizzato, non soltanto un app root vuoto.

// curl http://localhost:4000/ | grep "<h1>"

Controllo rapido

Verifichi le Sue conoscenze sulla configurazione di SSR.

Riepilogo

Ha configurato SSR con ng add @angular/ssr: il comando aggiunge un server Express, provideServerRendering() e l'idratazione del client. Ricordi di proteggere le API disponibili solo nel browser, utilizzare URL assoluti lato server e verificare l'HTML renderizzato nella risposta grezza.

Domande Frequenti

La lezione «Configurare l'SSR di Angular» è gratuita?

Sì — il testo completo di «Configurare l'SSR di Angular» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Configurare l'SSR di Angular»?

Aggiungere l'SSR con Angular CLI Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Configurare l'SSR di Angular»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy