Angular Academy · Lektion

Opsætning af Angular SSR

Tilføj SSR med Angular CLI.

Lektion 2 af 413 trin

Opsætning af Angular SSR er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 2 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.

Tilføjelse af SSR

Den hurtigste måde at aktivere SSR på er schematicket ng add @angular/ssr. Det konfigurerer serverbygget, en Express-baseret server og hydrering for dig.

// terminal
// ng add @angular/ssr

Nye projekter

Når du opretter en ny app, kan du tilvælge SSR direkte med SSR-flaget, så projektet er klar til SSR fra starten.

// ng new my-app --ssr

Det, schematicket tilføjer

Det tilføjer en server.ts (Express-server), en main.server.ts-bootstrap, en app.config.server.ts, opdaterer angular.json med serverindstillinger og aktiverer hydrering i appkonfigurationen.

provideServerRendering

Serverens appkonfiguration stiller SSR-motoren til rådighed via provideServerRendering(), som flettes sammen med din browserkonfiguration.

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

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

Hydrering på klienten

Browserkonfigurationen aktiverer hydrering, så klienten genbruger serverens HTML i stedet for at gengive den igen. Dette tilføjes automatisk af schematicket.

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

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

Express-serveren

server.ts opretter en Express-app, der leverer statiske aktiver og overlader HTML-gengivelsen til Angulars SSR-motor for alle andre ruter.

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

Udviklingsserver

Under udvikling kører ng serve automatisk SSR med applikationsbyggeren, så du kan se servergengivet output og hydrering uden ekstra trin.

// ng serve

Bygning til produktion

Et produktionsbyg genererer et browser-bundle og et server-bundle. Du kører Node-serverens indgang for at levere SSR i produktion.

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

API'er, der kun findes i browseren

Kode kører også på serveren, hvor window, document og localStorage ikke findes. Beskyt adgangen til dem, ellers går SSR ned.

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

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

Absolutte URL'er til HTTP

På serveren har relative API-URL'er ingen oprindelse. Brug absolutte URL'er, eller konfigurer en basisadresse, så serverens HttpClient-kald løses korrekt.

Bekræft, at SSR fungerer

Bekræft SSR ved at anmode om en side og undersøge det rå svar (for eksempel med curl). Du bør kunne se gengivet indhold i HTML'en, ikke kun en tom app-rod.

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

Hurtigt tjek

Tjek din viden om opsætning af SSR.

Besvar den i den interaktive lektion

Opsummering

Du satte SSR op med ng add @angular/ssr: Det tilføjer en Express-server, provideServerRendering() og klienthydrering. Husk at beskytte browser-API'er, bruge absolutte URL'er på serversiden og bekræfte den gengivne HTML i det rå svar.

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 “Opsætning af Angular SSR” gratis?

Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Opsætning af Angular SSR”, 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 “Opsætning af Angular SSR”?

Tilføj SSR med Angular CLI. 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 2 af 4.

Hvor lang tid tager lektionen “Opsætning af Angular SSR”?

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