Angular Academy · Lektion

Serverrouten und Rendering-Modi

Prerendering, SSR und CSR pro Route konfigurieren

Serverrouten und Rendering-Modi ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Eine Lösung passt nicht für alle

Nicht jede Route sollte auf dieselbe Weise gerendert werden. Mit Angular SSR können Sie pro Route einen Rendering-Modus festlegen: serverseitig gerendert, clientseitig gerendert oder zur Build-Zeit vorgerendert.

Die drei Modi

RenderMode.Server rendert bei jeder Anfrage, RenderMode.Client rendert ausschließlich im Browser (CSR), und RenderMode.Prerender erzeugt statisches HTML zur Build-Zeit (SSG).

Konfiguration der Server-Routen

Definieren Sie ein ServerRoute[], das Pfade Rendering-Modi zuordnet, und stellen Sie es mit provideServerRouting in der Server-Konfiguration bereit.

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

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

Einrichten

Registrieren Sie die Routen in der Server-App-Konfiguration, damit die SSR-Engine weiß, wie sie die einzelnen Pfade behandeln soll.

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

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

Wann Sie Prerendering verwenden sollten

Wählen Sie Prerender für stabile, öffentliche Seiten wie Startseite, Über-uns-Seite oder Dokumentation. Sie werden einmalig als HTML erstellt, sofort über ein CDN ausgeliefert und verursachen keine Serverkosten pro Anfrage.

Wann Sie Server verwenden sollten

Wählen Sie Server für Seiten, deren Inhalte sich pro Anfrage oder Benutzer ändern, die aber weiterhin SEO oder ein schnelles erstes Rendern benötigen, etwa eine Produktseite mit aktuellem Lagerbestand.

Wann Sie Client verwenden sollten

Wählen Sie Client für stark interaktive, private Seiten, bei denen SEO und das erste Rendern eine geringe Rolle spielen, etwa ein authentifiziertes Dashboard. Der Server sendet eine Hülle und der Browser rendert sie.

Dynamische Parameter vor-rendern

Bei parametrisierten Routen müssen Sie dem Prerenderer mitteilen, welche Parameter erzeugt werden sollen, indem Sie mit getPrerenderParams eine Liste zurückgeben.

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

Fallback für Prerendering

Nicht vorgerenderte Parameter können zur Laufzeit auf serverseitiges oder clientseitiges Rendering zurückfallen. So können Sie beliebte Elemente vor-rendern und die übrigen bei Bedarf erzeugen.

Header und Status pro Route

Server-Routen können Antwort-Header und Statuscodes festlegen. Das ist beispielsweise für Cache-Richtlinien oder die Rückgabe eines 404-Status durch einen Handler für nicht gefundene Routen nützlich.

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

Modi strategisch kombinieren

Eine echte App kombiniert die Modi: Marketingseiten werden vorgerendert, dynamische SEO-kritische Seiten serverseitig gerendert und die eingeloggte App clientseitig gerendert. So werden Kosten und Performance gemeinsam optimiert.

Schnelltest

Überprüfen Sie Ihr Wissen über die Rendering-Modi.

Zusammenfassung

Sie haben das Rendering pro Route mit ServerRoute[] und provideServerRouting konfiguriert: Prerender für stabile öffentliche Seiten, Server für dynamische SEO-Seiten und Client für private interaktive Seiten, einschließlich Prerender-Parametern für dynamische Routen.

Häufig gestellte Fragen

Ist die Lektion „Serverrouten und Rendering-Modi“ kostenlos?

Ja — der vollständige Text von „Serverrouten und Rendering-Modi“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Serverrouten und Rendering-Modi“?

Prerendering, SSR und CSR pro Route konfigurieren Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Serverrouten und Rendering-Modi“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy