Angular Academy · Lezione

Route server e modalità di rendering

Configurare prerender, SSR e CSR per ogni route

Route server e modalità di rendering è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Una soluzione non va bene per tutto

Non tutte le route devono essere renderizzate nello stesso modo. Angular SSR consente di assegnare una modalità di rendering a ogni route: renderizzata dal server, dal client oppure prerenderizzata in fase di build.

Le tre modalità

RenderMode.Server esegue il rendering a ogni richiesta, RenderMode.Client esegue il rendering solo nel browser (CSR) e RenderMode.Prerender genera HTML statico in fase di build (SSG).

Configurazione delle route del server

Definisca un ServerRoute[] che associ i percorsi alle modalità di rendering, quindi lo fornisca con provideServerRouting nella configurazione del server.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'dashboard', renderMode: RenderMode.Client },
  { path: '**', renderMode: RenderMode.Server }
];

Collegare la configurazione

Registri le route nella configurazione dell'applicazione server, così il motore SSR saprà come gestire ogni percorso.

// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';

providers: [
  provideServerRendering(),
  provideServerRouting(serverRoutes)
]

Quando usare il prerendering

Scelga Prerender per le pagine pubbliche e stabili: home, informazioni e documentazione. Vengono trasformate una volta in HTML, servite istantaneamente da una CDN e non comportano costi server per richiesta.

Quando usare Server

Scelga Server per le pagine il cui contenuto cambia a ogni richiesta o in base all'utente, ma che richiedono comunque SEO o una visualizzazione iniziale rapida, come una pagina prodotto con disponibilità aggiornata.

Quando usare Client

Scelga Client per pagine altamente interattive e private, dove SEO e visualizzazione iniziale sono poco importanti, come un dashboard autenticato. Il server invia una shell e il browser esegue il rendering.

Prerendering dei parametri dinamici

Per le route parametrizzate deve indicare al prerenderer quali parametri generare, restituendo un elenco tramite getPrerenderParams.

{
  path: 'product/:id',
  renderMode: RenderMode.Prerender,
  async getPrerenderParams() {
    const ids = await fetchProductIds();
    return ids.map(id => ({ id }));
  }
}

Fallback per il prerendering

I parametri non prerenderizzati possono ricorrere al rendering server o client durante l'esecuzione, così può prerenderizzare gli elementi più popolari e renderizzare su richiesta quelli meno frequenti.

Header e stato per singola route

Le route del server possono impostare gli header della risposta e i codici di stato, una funzione utile per le politiche di caching o per restituire un 404 da un gestore di route non trovata.

{
  path: 'old-page',
  renderMode: RenderMode.Server,
  headers: { 'Cache-Control': 'no-store' }
}

Combinare strategicamente le modalità

Un'app reale combina le modalità: prerenderizza le pagine di marketing, usa il rendering server per le pagine dinamiche importanti per la SEO e il rendering client per l'app protetta da autenticazione. In questo modo ottimizza insieme costi e prestazioni.

Controllo rapido

Verifichi le Sue conoscenze sulle modalità di rendering.

Riepilogo

Ha configurato il rendering per singola route con ServerRoute[] e provideServerRouting: Prerender per le pagine pubbliche stabili, Server per le pagine dinamiche importanti per la SEO e Client per le pagine private e interattive, inclusi i parametri di prerendering per le route dinamiche.

Domande Frequenti

La lezione «Route server e modalità di rendering» è gratuita?

Sì — il testo completo di «Route server e modalità di rendering» è 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 «Route server e modalità di rendering»?

Configurare prerender, SSR e CSR per ogni route 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 3 di 4.

Quanto tempo richiede la lezione «Route server e modalità di rendering»?

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