Angular Academy · Les

Serverroutes en renderingmodi

Configureer prerendering, SSR en CSR per route

Les 3 van 413 stappen

Serverroutes en renderingmodi is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Eén aanpak werkt niet voor alles

Niet elke route moet op dezelfde manier worden gerenderd. Met Angular SSR kun je per route een rendermodus instellen: op de server gerenderd, op de client gerenderd of tijdens het bouwen vooraf gerenderd.

De drie modi

RenderMode.Server rendert bij elk verzoek, RenderMode.Client rendert alleen in de browser (CSR) en RenderMode.Prerender genereert statische HTML tijdens het bouwen (SSG).

Configuratie van serverroutes

Definieer een ServerRoute[] die paden aan rendermodi koppelt en lever deze vervolgens met provideServerRouting aan in de serverconfiguratie.

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

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

Alles verbinden

Registreer de routes in de configuratie van de serverapp, zodat de SSR-engine weet hoe elk pad moet worden afgehandeld.

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

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

Wanneer je vooraf rendert

Kies Prerender voor stabiele, openbare pagina's: home, over ons en documentatie. Ze worden één keer als HTML gebouwd, direct vanaf een CDN aangeboden en brengen geen serverkosten per verzoek met zich mee.

Wanneer je de server gebruikt

Kies Server voor pagina's waarvan de inhoud per verzoek of per gebruiker verandert, maar die toch SEO of een snelle eerste weergave nodig hebben, zoals een productpagina met actuele voorraad.

Wanneer je de client gebruikt

Kies Client voor zeer interactieve, afgeschermde pagina's waarbij SEO en de eerste weergave weinig belangrijk zijn, zoals een dashboard waarvoor je moet zijn aangemeld. De server stuurt een basis en de browser rendert deze.

Dynamische parameters vooraf renderen

Voor routes met parameters moet je de vooraf-renderaar vertellen welke parameters moeten worden gegenereerd door met getPrerenderParams een lijst terug te geven.

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

Terugval voor vooraf renderen

Parameters die niet vooraf zijn gerenderd, kunnen tijdens runtime terugvallen op rendering door de server of de client. Zo render je populaire items vooraf en wordt de lange staart op aanvraag gerenderd.

Headers en status per route

Serverroutes kunnen antwoordheaders en statuscodes instellen. Dat is nuttig voor cachebeleid of om een 404 terug te geven vanuit een routehandler voor niet-bestaande pagina's.

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

Modi strategisch combineren

Een echte app combineert modi: render marketingpagina's vooraf, render dynamische SEO-belangrijke pagina's op de server en render de app achter een aanmelding op de client. Zo optimaliseer je kosten en prestaties tegelijk.

Korte controle

Controleer je kennis van rendermodi.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt rendering per route geconfigureerd met ServerRoute[] en provideServerRouting: Prerender voor stabiele openbare pagina's, Server voor dynamische SEO-pagina's en Client voor afgeschermde interactieve pagina's, inclusief vooraf te renderen parameters voor dynamische routes.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Serverroutes en renderingmodi” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Serverroutes en renderingmodi”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Serverroutes en renderingmodi”?

Configureer prerendering, SSR en CSR per route Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Serverroutes en renderingmodi”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy