Nuxt ist ein modernes Framework, das speziell für die Entwicklung von SEO-optimierten und hochperformanten Webanwendungen entwickelt wurde. In diesem Artikel erfährst du, wie du Nuxt optimal in Produktionsumgebungen einsetzen kannst. Wir beleuchten die verschiedenen Rendering-Methoden – statische Generierung und Server-Rendering – und geben Tipps, wie du das Beste aus beiden Welten herausholen kannst.

Einleitung

Nuxt ist ein vielseitiges Framework, das Entwicklern hilft, moderne Webanwendungen effizient zu erstellen. Ein entscheidender Aspekt bei der Entwicklung mit Nuxt ist die Wahl der richtigen Rendering-Methode. Die zwei Hauptoptionen sind:

Doch wann solltest du Nuxt Generate oder Nuxt Server verwenden? Dieser Artikel gibt dir eine klare Übersicht über die Nuxt Render-Strategien im Vergleich, zeigt ihre Vor- und Nachteile auf und stellt hybride Ansätze vor.

Statische Generierung (Nuxt Generate)

Die statische Generierung ist ein Ansatz, bei dem während des Build-Prozesses HTML-Dateien erstellt werden, die dann direkt von einem Webserver oder CDN ausgeliefert werden. Das führt zu:

Alle Seiten der Website werden während des Build-Prozesses generiert und als statische HTML-Dateien bereitgestellt.

Ein häufiges Beispiel ist eine Blog-Website. Hier können alle Artikel während des Builds generiert werden. Zusätzlich kann ein Crawler genutzt werden, um alle internen Links automatisch zu erfassen und sicherzustellen, dass alle Inhalte basierend auf dem Index generiert werden:

// nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/'],
    },
  }
})

Mit dieser Konfiguration werden alle angegebenen Routen während des Build-Prozesses generiert und als statische HTML-Dateien bereitgestellt. Ein integrierter Crawler sorgt dafür, dass auch alle internen Links automatisch erfasst und generiert werden. Das entlastet den Webserver erheblich und ermöglicht blitzschnelle Ladezeiten. Die routes-Option in der Datei nuxt.config.ts gibt dabei genau an, welche Pfade während des Builds erstellt werden sollen.

Um den statischen Generierungsmodus zu nutzen, führe folgendes npm-Kommando aus:

npm run generate

Nach dem Ausführen des Befehls npm run generate werden die statischen HTML-Dateien im Verzeichnis dist gespeichert. Um die Seite online zugänglich zu machen, musst du diese Dateien auf einen Webserver oder ein CDN hochladen.

Zusammenfassung:

Wie du Nuxt effizient nutzt, erfährst du in unserem Blog zur Webentwicklung mit Vue.js & Nuxt .

Weitere Informationen zur Konfiguration findest du in der offiziellen Nuxt-Dokumentation.

Server-Rendering (Nuxt Server)

Beim Server-Rendering wird die HTML-Ausgabe dynamisch auf einem Server generiert, sobald eine Anfrage gestellt wird. Dieser Ansatz eignet sich besonders für Anwendungen wie Dashboards, die personalisierte Inhalte oder häufig aktualisierte Daten bereitstellen:

<script setup lang="ts">
interface User {
  name: string
  lastLogin: string
}

const user = ref<User | null>(null)

const { data } = await useFetch<User>('/api/user')
user.value = data.value
script>

<template>
  <div v-if="user">
    <h1>Willkommen, {{ user.name }}h1>
    <p>Letzte Anmeldung: {{ user.lastLogin }}p>
  div>
template>

In diesem Beispiel wird die useFetch-Methode genutzt, um während des Server-Renderings stets aktuelle Nutzerdaten zu laden und an die Komponente zu übergeben. Dies stellt sicher, dass die Inhalte immer aktuell sind. Dank der Auto-Import-Funktionalität von Nuxt müssen Systemfunktionen wie ref und useFetch nicht separat importiert werden.

Um den Server-Rendering-Modus zu nutzen, kannst du das folgende npm-Kommando ausführen:

npm run build
npm run start

Zusammenfassung:

Weitere Details findest du in der offiziellen Nuxt-Dokumentation zum Server-Rendering.

Hybride Ansätze mit Nuxt

Ein Hybridansatz kombiniert die Vorteile von statischer Generierung und Server-Rendering. Dabei kannst du ausgewählte Seiten statisch generieren, während andere dynamisch gerendert werden. Dies eignet sich besonders für Anwendungen mit gemischten Anforderungen, wie eine E-Commerce-Website mit statisch generierten Produktseiten und einer dynamischen Warenkorb-Funktion.

<script setup lang="ts">
interface Product {
  id: number
  name: string
  description: string
}

const route = useRoute()
const product = ref<Product | null>(null)

const { data } = await useFetch<Product>(`/api/products/${route.params.id}`)
product.value = data.value

function addToCart(productId: number) {
  // Dynamische Funktion zum Hinzufügen des Produkts in den Warenkorb
  // ...
}
script>

<template>
  <div v-if="product">
    <h1>{{ product.name }}h1>
    <p>{{ product.description }}p>
    <button @click="addToCart(product.id)">
      In den Warenkorb
    button>
  div>
template>

In diesem Beispiel werden die Produktinformationen bereits beim Build-Prozess als statische HTML-Dateien generiert. Die Warenkorb-Funktion hingegen wird dynamisch gerendert, um Nutzern eine Interaktion in Echtzeit zu ermöglichen.

Michael Schilonka

Wir können auch Deine Apps mit Nuxt realisieren.

Jetzt Kontakt aufnehmen

×

Du kannst einen Termin mit unserem Experten vereinbaren

oder

oder

Formular läd gerade...

Schließen

Um eine Nuxt-Anwendung im Hybridmodus zu starten, kannst du die routeRules-Option in der Datei nuxt.config.ts verwenden. Hier ist ein Beispiel für einen Online-Shop:

// nuxt.config.ts

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/products/**': { swr: 3600 },
    '/admin/**': { ssr: false },
    '/api/**': { cors: true },
    '/old-page': { redirect: '/new-page' }
  }
})

Weitere Informationen zu den routeRules findest du in der offiziellen Nuxt-Dokumentation.

Mit dieser Konfiguration werden die Produktseiten sowie die Startseite statisch generiert, während der Warenkorb und die Benutzerprofile dynamisch generiert werden. Beachte, dass Hybrid-Rendering nicht verfügbar ist, wenn nuxt generate verwendet wird. Um die Anwendung im Hybridmodus zu starten, führe die folgenden npm-Befehle aus:

npm run build
npm run start

Der Befehl npm run build erstellt die statischen HTML-Dateien und das Server-Bundle, und npm run start startet den Server, der sowohl die statischen Dateien als auch die dynamischen Inhalte ausliefert. Dies ermöglicht es dir, die Anwendung so zu testen, wie sie in der Produktion laufen würde.

Zusammenfassung:

Wenn du mehr über Headless E-Commerce-Lösungen erfahren möchtest, besuche unsere Seite zu Headless E-Commerce.

Fazit: Optimale Nutzung von Nuxt in der Produktion

Die Wahl zwischen Nuxt Generate und Nuxt Server hängt von den Anforderungen deiner Anwendung ab:

Hast du Fragen oder möchtest du Unterstützung bei der Umsetzung? Kontaktiere uns – wir helfen dir, deine Nuxt-Projekte erfolgreich umzusetzen!

Weitere Informationen zu den Rendering-Konzepten findest du in der offiziellen Nuxt-Dokumentation.

Häufige Fragen

1. Was ist der Unterschied zwischen Nuxt Generate und Nuxt Server?

Nuxt Generate erstellt während des Build-Prozesses statische HTML-Dateien, die von einem Server oder CDN ausgeliefert werden. Nuxt Server hingegen rendert die Seiten dynamisch, wenn ein Nutzer sie anfragt. Beide Methoden haben unterschiedliche Anwendungsfälle und Vorteile.

2. Wann sollte ich Nuxt Generate oder Nuxt Server verwenden?

Nutze Nuxt Generate für Websites mit gleichbleibendem Inhalt wie Blogs oder Marketingseiten. Nuxt Server ist besser geeignet für Anwendungen mit personalisierten oder häufig aktualisierten Inhalten, wie Dashboards oder E-Commerce-Seiten.

3. Welche Vorteile bietet statische Generierung für SEO und Performance?

Mit Nuxt Generate sind die Ladezeiten extrem schnell, da HTML-Dateien vorgerendert werden. Das verbessert die SEO durch eine einfache Indexierung und reduziert Hosting-Kosten. Allerdings sind keine Echtzeit-Inhalte möglich, was je nach Anwendungsfall eine Einschränkung darstellen kann.

4. Kann ich statische und dynamische Inhalte in Nuxt kombinieren?

Ja, hybride Ansätze sind möglich. Du kannst zum Beispiel Blogartikel statisch generieren und dynamische Elemente wie Kommentare client-seitig rendern lassen. Dies vereint schnelle Performance mit Flexibilität und passt sich perfekt an unterschiedliche Anforderungen an.

5. Wie richte ich den richtigen Nuxt Production Mode ein?

Für eine optimale Produktion nutzt du statische Generierung, wenn der Inhalt konstant ist, oder setzt auf Server-Rendering für dynamische Inhalte. Mit hybriden Ansätzen kannst du beides kombinieren. Eine saubere Konfiguration in der nuxt.config.ts ist entscheidend, um die bestmögliche Performance und Skalierbarkeit zu erreichen.

Was unsere Kunden über uns sagen

• Ofa Bamberg GmbH

  B2B Online-Shop | B2C Website | Hosting | Betreuung | Security
  © Ofa Bamberg GmbH

  Blueshoe betreut uns und unsere Webapplikationen seit vielen Jahren. Vom Online-Shop bis hin zu großen Teilen unseres Web-Umfelds hat sich das Unternehmen stets kompetent, verlässlich und vorausschauend gezeigt. Wir sind sehr zufrieden mit Blueshoe als Partner.

  Rainer KlieweGeschäftsführer
• Ludwig-Maximilians-Universität München

  Plattformentwicklung | Hosting | Betreuung | APIs | Website
  Blueshoe hat unsere Forschungsdatenplattform Munich Media Monitoring (M3) entwickelt und uns hervorragend dabei beraten. Das Team hat unsere Anforderungen genau verstanden und sich aktiv in die Ausgestaltung der Software und der Betriebsumgebung eingebracht. Wir sind froh, dass auch Wartung und weiterführender Support in Blueshoes Händen liegen.

  Prof. Dr. Mario HaimLehrstuhlinhaber, Institut für Kommunikationswissenschaft und Medienforschung
• Deutsches Museum

  Digitalisierung | Beratung | Datenbank-Optimierung | GraphQL | CMS
  Foto: Anne Göttlicher

  Im Rahmen eines komplexen Digitalisierungsprojekts für unsere Exponate-Datenbank war Blueshoe ein äußerst verlässlicher Partner. Sie haben uns nicht nur während des gesamten Projekts hervorragend beraten, sondern unsere Anforderungen perfekt umgesetzt. Dank ihrer Arbeit ist unsere Datenbank nun ein bedeutender Mehrwert für die weltweite wissenschaftliche Forschung.

  Georg HohmannLeiter Deutsches Museum Digital
• Fonds Finanz Maklerservice GmbH

  Plattformentwicklung | Prozess-Systeme | Hosting | Betreuung | Zertifikate | Website
  © Fonds Finanz Maklerservice GmbH

  Blueshoe ist unsere verlängerte Werkbank für Entwicklung, Wartung und Support unserer Weiterbildungs- und Zertifizierungsplattformen. Das Team hat sich gründlich in unsere Abläufe eingearbeitet, und wir freuen uns, Blueshoe als zuverlässigen Partner an unserer Seite zu haben.

  Norbert PorazikGründer und Geschäftsführer
• Technische Universität Hamburg

  Plattformentwicklung | Beratung | Prozess-Systeme | Hosting | Website
  Seit 2019 unterstützt uns die Blueshoe GmbH tatkräftig bei der Entwicklung und Weiterentwicklung des "Digital Learning Lab" und der "Digital Learning Tools". Dank ihrer Beratung konnten wir von Anfang an auf eine zukunftssichere, moderne technische Struktur setzen. Die Zusammenarbeit ist reibungslos, und wir fühlen uns rundum gut betreut. Und davon profitieren dann auch die Lehrkräfte in Hamburg.

  Sören Schütt-SayedOberingenieur