Angular Academy · Lektion

Serverruter og renderingstilstande

Konfigurér prerender, SSR og CSR pr. rute.

Lektion 3 af 413 trin

Serverruter og renderingstilstande er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.

Én løsning passer ikke til alt

Ikke alle ruter bør gengives på samme måde. Angular SSR lader dig tildele en gengivelsestilstand pr. rute: servergengivet, klientgengivet eller prerenderet på byggetidspunktet.

De tre tilstande

RenderMode.Server gengiver ved hver forespørgsel, RenderMode.Client gengiver kun i browseren (CSR), og RenderMode.Prerender genererer statisk HTML på byggetidspunktet (SSG).

Konfiguration af serverruter

Definér en ServerRoute[], der knytter stier til gengivelsestilstande, og stil den derefter til rådighed med provideServerRouting i serverkonfigurationen.

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

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

Sæt det sammen

Registrér ruterne i serverens appkonfiguration, så SSR-motoren ved, hvordan hver sti skal håndteres.

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

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

Hvornår skal du prerendere

Vælg Prerender til stabile, offentlige sider: forside, om-side og dokumentation. De bygges én gang til HTML, leveres øjeblikkeligt fra et CDN og medfører ingen serveromkostning pr. forespørgsel.

Hvornår skal du bruge Server

Vælg Server til sider, hvis indhold ændres pr. forespørgsel eller bruger, men som stadig har brug for SEO eller hurtig første visning, for eksempel en produktside med lagerstatus i realtid.

Hvornår skal du bruge Client

Vælg Client til meget interaktive, private sider, hvor SEO og den første visning betyder mindre, for eksempel et godkendt dashboard. Serveren sender en skal, og browseren gengiver siden.

Prerendering af dynamiske parametre

For parametriserede ruter skal du fortælle prerendereren, hvilke parametre der skal genereres, ved at returnere en liste med getPrerenderParams.

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

Fallback for prerendering

Parametre, der ikke er prerenderet, kan falde tilbage til server- eller klientgengivelse under kørsel, så du prerenderer populære elementer og gengiver den lange hale efter behov.

Headere og status pr. rute

Serverruter kan angive svarheadere og statuskoder, hvilket er nyttigt til cachepolitikker eller til at returnere 404 fra en handler for en rute, der ikke blev fundet.

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

Strategisk blanding af tilstande

En rigtig app kombinerer tilstande: prerender marketingsider, gengiv SEO-kritiske dynamiske sider på serveren, og gengiv appen bag login på klienten. Det optimerer omkostninger og ydeevne samlet.

Hurtigt tjek

Tjek din viden om gengivelsestilstande.

Besvar den i den interaktive lektion

Opsummering

Du konfigurerede gengivelse pr. rute med ServerRoute[] og provideServerRouting: Prerender til stabile, offentlige sider, Server til dynamiske SEO-sider og Client til private, interaktive sider, herunder prerender-parametre til dynamiske ruter.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 38
Lektioner: 144

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Serverruter og renderingstilstande” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Serverruter og renderingstilstande”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Serverruter og renderingstilstande”?

Konfigurér prerender, SSR og CSR pr. rute. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Angular Academy?

Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Serverruter og renderingstilstande”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Angular Academy-lektion?

Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Angular Academy