Kapitel 9: SSR & SSG (Rendering-Modi)

In diesem Kapitel lernen Sie die verschiedenen Rendering-Modi von Nuxt 3 und wann Sie welchen verwenden sollten.

---

9.1 SSR vs. SSG vs. SPA

Nuxt 3 unterstützt drei Rendering-Modi:

Modus	Abkürzung	Beschreibung	SEO	Geschwindigkeit
Server-Side Rendering	SSR	HTML wird bei jeder Anfrage auf dem Server generiert	✅ Hervorragend	🟡 Mittel
Static Site Generation	SSG	HTML wird einmalig beim Build generiert	✅ Hervorragend	🚀 Sehr schnell
Single Page Application	SPA	HTML wird im Browser geladen, JS rendert Inhalte	❌ Eingeschränkt	🟡 Mittel

---

9.2 Server-Side Rendering (SSR)

Bei SSR wird die Seite bei jeder Anfrage auf dem Server gerendert.

Wann SSR verwenden?

• ✅ Dynamische Inhalte (Benutzer-Daten, Echtzeit-Daten)
• ✅ SEO-kritische Seiten (Blog, E-Commerce)
• ✅ Schnelle initiale Ladezeit

---

Beispiel: SSR in Nuxt 3

pages/posts/[id].vue (Dynamische Seite):

<script setup>
// Diese Funktion wird auf dem Server ausgeführt!
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)
</script>

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <div v-html="post.content"></div>
  </div>
</template>

Was passiert hier?

1. Benutzer fordert /posts/123 an
2. Nuxt ruft useFetch() auf dem Server auf
3. Server lädt Daten von der API
4. Server generiert HTML mit Daten
5. Browser erhält fertiges HTML (schnell sichtbar!)
6. Vue "hydriert" die Seite (macht sie interaktiv)

---

9.3 Static Site Generation (SSG)

Bei SSG werden alle Seiten einmalig beim Build generiert.

Wann SSG verwenden?

• ✅ Statische Inhalte (Blog, Dokumentation, Landing Pages)
• ✅ Maximale Performance
• ✅ Kostenloses Hosting (GitHub Pages, Netlify, Vercel)
• ✅ Keine Serverlast

---

SSG in Nuxt 3 aktivieren:

Methode 1: nuxt generate Befehl

# Statische Seiten generieren
npx nuxi generate

# Oder in package.json:
{
  "scripts": {
    "generate": "nuxi generate"
  }
}

# Ausführen:
pnpm generate

Die generierten Dateien befinden sich in .output/public/.

---

Methode 2: routeRules in nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    // Diese Route statisch generieren
    '/about': { prerender: true },

    // Alle Blog-Posts statisch generieren
    '/blog/**': { prerender: true },

    // API-Routen statisch generieren
    '/api/posts': { prerender: true }
  }
})

---

Beispiel: Blog mit SSG

pages/blog/[slug].vue:

<script setup>
// Daten werden beim Build abgerufen (SSG)
const route = useRoute()
const { data: post } = await useAsyncData(
  `post-${route.params.slug}`,
  () => queryContent(`/blog/${route.params.slug}`).findOne()
)
</script>

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <ContentRenderer :value="post" />
  </div>
</template>

Beim Build (nuxt generate) werden alle Blog-Posts als statische HTML-Dateien generiert.

---

9.4 Hydration & Client-Side Navigation

Hydration (Wichtiges Konzept!)

Nach dem SSR muss Vue die Seite "übernehmen" (Hydration), um Interaktivität zu ermöglichen.

Problem: Wenn das serverseitige HTML nicht mit dem clientseitigen HTML übereinstimmt, gibt es Hydration-Fehler.

Lösung: Verwenden Sie <ClientOnly>, um client-spezifische Inhalte zu kapseln.

<template>
  <div>
    <h1>Meine Seite</h1>

    <!-- Nur im Client rendern (vermeidet Hydration-Fehler) -->
    <ClientOnly>
      <SomeClientSideComponent />
    </ClientOnly>
  </div>
</template>

---

9.5 Hybrid Rendering (SPA + SSR)

Sie können pro Route entscheiden, welcher Rendering-Modus verwendet werden soll.

Beispiel: nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    // Startseite: SSR (SEO wichtig)
    '/': { ssr: true },

    // Dashboard: SPA (keine SEO nötig)
    '/dashboard/**': { ssr: false },

    // Über uns: SSG (statisch)
    '/about': { prerender: true },

    // API: Gecacht
    '/api/**': { cache: { maxAge: 60 * 60 } }
  }
})

---

9.6 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Den Unterschied zwischen SSR, SSG und SPA
• ✅ Wann Sie welchen Rendering-Modus verwenden sollten
• ✅ Wie SSR in Nuxt 3 funktioniert (Server → Client Hydration)
• ✅ Wie SSG aktiviert wird (nuxt generate oder routeRules)
• ✅ Hybrid Rendering (pro Route konfigurieren)

Nächste Schritte: Im nächsten Kapitel lernen wir Nuxt-Ökosystem integrieren – wie man Styling-Lösungen, API-Anfragen und mehr hinzufügt.

---

📚 Weiterführende Ressourcen

• Nuxt 3 Rendering-Modi
• SSR vs. SSG Dokumentation
• routeRules API
• Hydration Dokumentation

---

Nächstes Kapitel: Kapitel 10: Nuxt-Ökosystem integrieren →