0Pricing
Vue Academy · Lektion

SSR vs. SSG vs. SPA-Modus

ssr:true/false, Nitro-Prerendering, der generate-Befehl und hybrides Rendering pro Route

SSR vs. SSG vs. SPA-Modus ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Überblick über Rendering-Modi

Nuxt kann Ihre App auf drei Arten rendern: SSR (der Server rendert jede Anfrage), SSG (Seiten werden zur Build-Zeit vorab erstellt) und SPA (alles wird im Browser gerendert). Sie können die Modi sogar pro Route kombinieren.

SSR: Der Standard

Mit ssr: true (der Standardeinstellung) rendert der Server für jede Anfrage HTML und der Client hydratisiert es. Das sorgt für einen schnellen First Paint und gute SEO, da Crawler vollständiges Markup sehen.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Wann SSR besonders geeignet ist

SSR eignet sich für Inhalte, die sich häufig ändern oder personalisiert sind – etwa Dashboards, Feeds und E-Commerce mit aktuellen Preisen –, wenn bei jeder Anfrage frisches HTML benötigt wird.

SPA-Modus

Mit ssr: false wird Nuxt zu einer Single-Page-App: Der Server sendet ein leeres Grundgerüst und der Browser rendert alles. Das Hosting ist einfacher, aber SEO und First Paint sind schlechter.

export default defineNuxtConfig({
  ssr: false
})

Wann SPA geeignet ist

Der SPA-Modus eignet sich für interne Tools und Apps hinter einem Login, bei denen SEO keine Rolle spielt und die als statische Dateien auf jedem CDN bereitgestellt werden sollen.

SSG: Statische Seitengenerierung

Mit nuxt generate wird jede Seite zur Build-Zeit als statisches HTML vorab gerendert. Das Ergebnis ist ein Ordner mit Dateien, die Sie ohne Node-Server überall hosten können.

npx nuxt generate
# outputs static HTML to .output/public

Wann SSG geeignet ist

SSG ist ideal für Inhalte, die sich selten ändern – etwa Blogs, Dokumentationen und Marketing-Websites. Die Seiten sind besonders schnell und lassen sich kostengünstig über ein CDN ausliefern.

Rendering pro Route mit routeRules

Die Konfiguration routeRules legt den Rendering-Modus für jedes Pfadmuster fest. Das ist hybrides Rendering: Verschiedene Teile einer App verwenden unterschiedliche Strategien.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Häufige Optionen für routeRules

prerender: true erstellt die Seite zur Build-Zeit vorab; ssr: false macht sie zu einer SPA; swr: n cached das SSR-Ergebnis für n Sekunden (stale-while-revalidate); redirect leitet Benutzer an eine andere Stelle weiter.

Inkrementelle statische Regenerierung

Die Option isr rendert eine Seite bei der ersten Anfrage vorab und cached die Ausgabe, die regelmäßig neu generiert wird. So verbindet sie die Geschwindigkeit von SSG mit der Aktualität von SSR für beliebte Seiten.

routeRules: {
  '/products/**': { isr: 600 }
}

Die passende Strategie auswählen

Beginnen Sie mit SSR als bester Standardeinstellung für SEO und Interaktivität. Verwenden Sie SSG für statische Inhalte, SPA für private Apps und routeRules, um einzelne Routen entsprechend den entstehenden Performance-Anforderungen fein abzustimmen.

Schnelltest

Testen Sie Ihr Wissen über Rendering-Modi.

Zusammenfassung

Sie haben die Rendering-Modi gelernt:

  • SSR (Standard) rendert pro Anfrage: gute SEO und schneller First Paint.
  • ssr:false erstellt eine SPA für private Apps.
  • nuxt generate erstellt eine statische SSG-Website.
  • routeRules ermöglicht hybrides Rendering: prerender, swr, isr und ssr:false pro Route.

Häufig gestellte Fragen

Ist die Lektion „SSR vs. SSG vs. SPA-Modus“ kostenlos?

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

Was lerne ich in „SSR vs. SSG vs. SPA-Modus“?

ssr:true/false, Nitro-Prerendering, der generate-Befehl und hybrides Rendering pro Route Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 4 von 4.

Wie lange dauert die Lektion „SSR vs. SSG vs. SPA-Modus“?

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

  1. Nuxt-3-Projektstruktur und dateibasierte Routen
  2. Daten abrufen: useFetch und useAsyncData
  3. Nuxt-Serverrouten und API-Endpunkte
  4. SSR vs. SSG vs. SPA-Modus
← Zurück zu Vue Academy