Software

Was ist Nuxt? Vue SSR, SEO Vorteile und wann Sie es brauchen

Talha Aslan 19 Minuten Lesezeit 4 Aufrufe

Was ist Nuxt und wofür braucht man es?

Nuxt ist ein quelloffenes Webframework auf Basis von Vue.js. Es ergänzt das Komponentenmodell von Vue um Rendering auf dem Server, dateibasiertes Routing, Datenabruf und Verwaltung der Head Tags. Damit bauen Sie Websites, die schnell laden und die Suchmaschinen ohne Umwege lesen.

Wir sind ein Team für digitales Marketing und Webentwicklung, kein Hosting Anbieter. Deshalb erklären wir Nuxt hier aus Sicht von SEO und Projektentscheidung. Die technischen Details stützen wir auf die offizielle Dokumentation von Nuxt und Google.

Warum ist das wichtig? Eine reine Vue App läuft im Browser, daher ist die erste HTML Antwort fast leer. Nuxt kann die Seite dagegen auf dem Server vorbereiten und vollständiges HTML senden. Außerdem können Sie im selben Projekt manche Seiten vorab erzeugen und andere zwischenspeichern.

Was ist der Unterschied zwischen Vue und Nuxt?

Vue ist eine Bibliothek für Oberflächen, Nuxt ist die Schicht darüber, die aus Vue ein vollständiges Seitengerüst macht. Vue erklären wir hier nicht von vorn, denn das übernimmt der Vue.js Artikel in unserer Serie. Stattdessen schauen wir, wie sich die beiden Schichten die Arbeit teilen.

Dabei verwaltet Vue allein Komponenten und reaktiven Zustand. Routing, Rendering auf dem Server und Meta Tags lösen Sie mit zusätzlichen Bibliotheken. Nuxt bündelt diese Entscheidungen für Sie. Folglich wird die Diskussion im Team kürzer, welches Plugin Sie nehmen.

ThemaNur VueNuxt
Erstes HTMLMeist eine leere Hülle, der Inhalt entsteht im BrowserStandardmäßig vollständiges HTML vom Server
RoutingSie richten einen eigenen Router einDateien im Ordner pages werden zu Routen
Meta TagsZusätzliches Paket nötiguseHead und useSeoMeta sind dabei
Render OptionenRendering im BrowserSSR, SPA, Vorab Erzeugung und Hybrid
EinrichtungsaufwandMehr manuelle EntscheidungenMehr fertige Standardwerte

Ein weiterer Unterschied liegt in der Projektstruktur. Nuxt kennt feste Ordner für Komponenten, Seiten, Layouts und gemeinsame Funktionen. Neue Entwickler wissen daher sofort, wo sie suchen müssen. In wachsenden Teams verhindert diese Ordnung das Chaos kleiner Einzelentscheidungen.

Kurz gesagt: Nuxt ist kein Konkurrent von Vue. Sie nutzen weiter Vue, überlassen die Entscheidungen rund um die Infrastruktur aber Nuxt.

Was ist Nuxt für SEO wert?

Der SEO Wert von Nuxt liegt darin, dass Browser und Bots den Inhalt als fertiges HTML erhalten. Titel, Beschreibung, Haupttext und interne Links stehen schon in der ersten Antwort. Ein Bot muss also nicht auf die Ausführung von JavaScript warten.

Das ist keine Ranking Garantie. Bei SEO wirken Inhaltsqualität, Linkstruktur und technische Gesundheit zusammen. Zum Beispiel steigt eine schlecht geschriebene Seite nicht auf, nur weil der Server sie rendert. Allerdings trifft Ihr Inhalt bei solidem technischem Fundament auf weniger Hindernisse.

Zudem sind Suchmaschinen nicht nur Google. Manche Bots führen JavaScript nur eingeschränkt aus, und soziale Netzwerke lesen für Vorschauen meist das erste HTML. Vollständiges HTML hilft deshalb auch bei der Vorschau beim Teilen.

Außerdem erleichtert Nuxt einen eigenen Titel und eine eigene Beschreibung für jede Route. Ein häufiges Problem auf Firmenseiten ist derselbe Titel auf allen Seiten. In Nuxt beheben Sie das pro Seite mit wenigen Zeilen.

Wie verarbeitet Google Seiten, die mit JavaScript entstehen?

Laut Google Search Central läuft die Verarbeitung in drei Phasen ab: Crawling, Rendering und Indexierung. Googlebot ruft zunächst die URL ab, prüft die Regeln der robots.txt und liest die Links im HTML aus. Danach landen Seiten mit dem Statuscode 200 in der Render Warteschlange.

In der Render Phase führt ein Chromium ohne Oberfläche das JavaScript aus. Google indexiert das fertig gerenderte HTML. Laut Dokumentation kann eine Seite einige Sekunden in dieser Warteschlange bleiben, es kann aber auch länger dauern.

Dieselbe Dokumentation äußert sich auch zu Rendering auf dem Server und zur Vorab Erzeugung. Sie nennt beides weiterhin eine gute Idee, denn es macht Ihre Website für Nutzer und Crawler schneller, und nicht alle Bots können JavaScript ausführen. Den wichtigen Teil des Inhalts legen Sie daher am besten ins erste HTML.

Als Quelle empfehlen wir die Grundlagen zu JavaScript und SEO von Google.

Welche Render Modi bietet Nuxt?

Die offizielle Nuxt Dokumentation beschreibt vier Hauptansätze. Jeder beantwortet einen anderen Bedarf. Zunächst sollten Sie prüfen, wie oft sich Ihr Inhalt ändert, und dann wählen.

  • Universelles Rendering (SSR): Das ist der Standard. Der Server führt den Vue Code aus und liefert vollständiges HTML, danach übernimmt der Browser per Hydration.
  • Rendering im Browser (SPA): Sie setzen ssr: false in der nuxt.config. Der Inhalt entsteht dann im Browser.
  • Hybrid Rendering: Mit routeRules geben Sie jeder Route eine eigene Regel.
  • Vorab Erzeugung: Mit nuxt generate oder nuxt build --prerender erzeugen Sie statische HTML Dateien.

Ein Hinweis der Dokumentation ist wichtig: Hybrid Rendering steht bei nuxt generate nicht zur Verfügung. Außerdem gibt es Rendering am Netzwerkrand (Edge), dafür brauchen Sie aber eine passende Plattform wie Cloudflare Pages, Vercel oder Netlify.

Eine einfache Faustregel hilft. Denken Sie bei selten geänderten Seiten an Vorab Erzeugung, bei oft geänderten Seiten an SSR oder zwischengespeicherte Antworten und bei Bereichen mit Login an Rendering im Browser. Dann arbeitet jede Route für ihren Zweck.

Details finden Sie auf der Seite zu den Render Modi von Nuxt.

Was ist Hydration und wie wirkt sie auf SEO und Tempo?

Wer wissen will, was ist Nuxt im Browser eigentlich, braucht den Begriff Hydration. Um das zu verstehen, denken Sie an den Moment, in dem Vue das statische HTML übernimmt, das vom Server kam. Die Nuxt Dokumentation beschreibt das so, dass JavaScript die Kontrolle über das Dokument übernimmt.

Also bringt dieser Ablauf in zwei Schritten eine Chance und ein Risiko. Die Chance: Der Inhalt erscheint also früh. Das Risiko: Die Ausgabe des Servers und die des Browsers können sich unterscheiden. Zum Beispiel stimmen beide nicht überein, wenn Sie eine Zufallszahl oder die aktuelle Uhrzeit ausgeben, und Vue warnt Sie.

Praktisch heißt das: Trennen Sie Teile, die auf beiden Seiten nicht dasselbe Ergebnis liefern. Dafür hat Nuxt die Komponente ClientOnly. Allerdings steht Text darin nicht im ersten HTML. Setzen Sie dort also nie wichtigen Text hinein, den Suchmaschinen sehen sollen.

Zudem senken Sie die Kosten der Hydration am sichersten, indem Sie weniger Komponenten und Pakete ausliefern. Listen Sie daher zunächst auf, was wirklich interaktiv sein muss.

Wie funktioniert Hybrid Rendering mit routeRules?

Viele, die fragen, was ist Nuxt, übersehen Hybrid Rendering. Damit legen Sie in einem Projekt pro Route unterschiedliches Verhalten fest. Zum Beispiel erzeugen Sie eine Kampagnenseite beim Build, liefern die Blogliste aus dem Cache und führen das Kundenportal nur im Browser aus.

Die Dokumentation nennt diese Optionen. Mit prerender erzeugen Sie die Route beim Build, swr fügt der Antwort Cache Header hinzu, und isr wendet eine ähnliche Idee auf den CDN Cache an. Schließlich führt ssr: false eine Route nur im Client aus.

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

Das ist eine erfundene Konfiguration, die nur die Logik zeigt. Passen Sie Dauer und Routennamen an Ihr Projekt an und prüfen Sie die Nitro Dokumentation, bevor Sie sich auf eine Cache Dauer verlassen.

Andererseits erhöht jede weitere Regel den Testaufwand. Definieren Sie daher nicht für jede Route eine Regel, sondern zunächst drei Gruppen: feste Seiten, oft wechselnde Seiten und Bereiche mit Login.

Wie funktioniert dateibasiertes Routing in Nuxt?

In Nuxt wird jede Vue Datei im Ordner pages zu einer Route. Sie schreiben also keine eigene Routentabelle, denn die Ordnerstruktur ersetzt sie. Seiten sind optional, und wenn Sie app.vue nutzen, müssen Sie die Komponente NuxtPage einbinden, damit die aktuelle Seite erscheint.

Eckige Klammern erzeugen dynamische Parameter. Das Beispiel der Dokumentation ist pages/users-[group]/[id].vue, und Sie lesen die Parameter über $route.params. Doppelte Klammern machen einen Parameter optional, während [...slug].vue alle Unterpfade abfängt.

  • pages/index.vue: Sie erzeugt die Route der Startseite.
  • pages/blog/[slug].vue: Sie öffnet für jeden Artikel eine dynamische Route.
  • pages/[...slug].vue: Sie fängt unbekannte Pfade an einer Stelle ab.

Diese Struktur macht lesbare URLs einfach. Wählen Sie also Dateinamen in Kleinbuchstaben ohne Sonderzeichen, dann bleiben Ihre Adressen sauber. Außerdem sparen Sie später Weiterleitungen, wenn Sie die Routenstruktur früh planen.

Für die Navigation gibt es die Komponente NuxtLink und die Funktion navigateTo. Ein SEO Punkt ist hier wichtig: NuxtLink erzeugt einen echten Link, also können Bots dem href Wert folgen.

Wie rufen Sie Daten mit useFetch und useAsyncData ab?

Auf einer Seite mit Rendering auf dem Server schickt die falsche Abrufmethode dieselbe Anfrage zweimal. Die Nuxt Dokumentation sagt es klar: Rufen Sie $fetch direkt in einer Komponente auf, lädt der Server die Daten einmal und der Browser noch einmal.

Also löst useFetch dieses Problem. Es überträgt das Ergebnis der Serveranfrage im Payload an den Client, daher startet bei der Hydration keine neue Anfrage. useAsyncData bietet feinere Kontrolle und kann beliebige asynchrone Logik umhüllen.

const { data: produkte } = await useFetch('/api/produkte')

Laut Dokumentation entspricht useFetch(url) fast useAsyncData(url, () => event.$fetch(url)). In den meisten Fällen genügt also useFetch. Nutzen Sie eine Abfrageschicht eines Drittanbieters, wechseln Sie zu useAsyncData.

Das Tempo hängt zudem von der Datenquelle ab. Antwortet die API langsam, ist auch die Seite langsam, denn der Server wartet auf die Daten, bevor er das HTML baut. Testen Sie Tempo und Fehlerverhalten Ihrer Datenquelle deshalb früh.

Wie steuern Sie Titel, Beschreibung und Open Graph Tags in Nuxt?

Nuxt bietet drei Wege, die Head Tags zu steuern. Erstens gibt es die Einstellung app.head in der nuxt.config. Sie passt zu festen Standardwerten, nimmt aber keine reaktiven Daten an.

Zweitens gibt es die Funktion useHead. Sie nimmt reaktive Eingaben an und erlaubt Titelvorlagen und Tags im Body. Drittens gibt es useSeoMeta. Es sichert die Typen für SEO Tags und verringert daher Fehler wie die Verwechslung von name und property.

useSeoMeta({
  title: 'Beispiel Produktseite',
  description: 'Eine kurze und einmalige Beschreibung dieser Seite.',
  ogTitle: 'Beispiel Produktseite',
  ogImage: 'https://example.com/beispiel.png',
})

Alle drei Wege nutzen Unhead. Übrigens sehen Sie mit unserer Google SERP Vorschau vorab, wie Titel und Beschreibung in den Suchergebnissen aussehen. Einen Entwurf der Tags ohne Handarbeit erstellt der Meta Tag Generator.

Canonical URL, Robots Anweisungen und strukturierte Daten folgen derselben Logik. Zum Beispiel erzeugen Parameter URLs doppelte Inhalte, wenn Sie das Canonical Tag nicht pro Route setzen. Für strukturierte Daten nutzen Sie unseren Schema Generator.

Als offizielle Referenz genügt die Seite zu SEO und Meta in Nuxt.

Was ist Nuxt im Hinblick auf Core Web Vitals?

Vollständiges HTML kann die Zeit verkürzen, bis Nutzer Inhalt sehen. Das fällt auf Seiten auf, deren Hauptinhalt ein großes Bild oder eine Überschrift ist. Allerdings garantiert Nuxt nicht von selbst eine schnelle Seite.

Der Grund ist einfach. Eine auf dem Server gerenderte Seite lädt im Browser trotzdem JavaScript und führt die Hydration aus. Eine schwere Komponentenbibliothek, unkontrollierte Skripte von Drittanbietern oder riesige Bilder verderben das Ergebnis. Messen ist also Pflicht.

  • Erstens schauen Sie auf echte Nutzerdaten, denn Laborwerte allein genügen nicht.
  • Zweitens prüfen Sie das größte Inhaltselement und die Verzögerung bei Interaktionen.
  • Schließlich schalten Sie Skripte von Drittanbietern einzeln ab und messen den Unterschied.

Zudem verdienen Bilder eine Erwähnung. Ein großes Titelbild ist oft das größte Inhaltselement der Seite. In der richtigen Größe und einem modernen Format bringt es oft mehr als das Rendering auf dem Server.

Zu Messwerten und Schwellen lesen Sie unseren Leitfaden zu Core Web Vitals. Zum Einfluss des JavaScript Gewichts hilft unser Artikel zu JavaScript und Ladezeit.

Wie bauen Sie mit Nuxt eine mehrsprachige Website?

Eine mehrsprachige Website braucht für jede Sprache eine eigene Adresse. Eine Struktur, die die Sprache unter derselben URL wechselt, erschwert es Suchmaschinen, die richtige Version zu indexieren. Die dateibasierten Routen von Nuxt machen diesen Aufbau leicht, denn Sie können für jede Sprache einen eigenen Ordner anlegen.

Die eigentliche Arbeit ist aber nicht das Erzeugen der Routen. Für jede Sprache brauchen Sie Titel und Beschreibung, die zur Suchweise in dieser Sprache passen, also keine reine Übersetzung. Außerdem empfiehlt Google für internationale Seiten, die Versionen per hreflang miteinander zu verknüpfen.

  • Nutzen Sie zunächst pro Sprache eine eigene, dauerhafte und lesbare URL.
  • Dann markieren Sie die Sprachversionen gegenseitig mit hreflang.
  • Überlassen Sie Titel und Beschreibung nicht der Maschinenübersetzung, sondern passen Sie sie von Hand an.
  • Prüfen Sie, ob die Sitemap alle Sprachversionen enthält.

Die SEO Seite behandeln wir ausführlich im Leitfaden zu SEO für mehrsprachige Websites. Welches Plugin Sie auf der Nuxt Seite wählen, hängt vom Projekt ab. Lesen Sie daher vorher die aktuelle Dokumentation des Plugins.

Passt Nuxt zu einem Onlineshop?

Manchmal ja, aber nicht für jeden Shop. Produktlisten, Filter und Kampagnenseiten bringen Suchverkehr, und es ist wertvoll, wenn diese Seiten schnell öffnen und als vollständiges HTML ankommen. Genau hier hilft Hybrid Rendering.

Allerdings besteht ein Onlineshop nicht nur aus dem Frontend. Warenkorb, Zahlung, Bestand, Rechnung und Retoure brauchen ein solides Backend. Eine fertige Shopplattform liefert Ihnen diese Teile. Mit Nuxt binden Sie sie über einen Dienst an oder entwickeln sie selbst.

Bewerten Sie daher zunächst Produktzahl, Kampagnenrhythmus und Teamkapazität. In einem kleinen Shop birgt eine fertige Plattform meist weniger Risiko. In einem großen Katalog mit eigenen Abläufen kann ein getrenntes Frontend Flexibilität schaffen.

Zum Einfluss der Geschwindigkeit auf den Umsatz lesen Sie unseren Artikel zur Ladezeit im Onlineshop. Zu Kategorie und Produktseiten hilft unser Leitfaden zu E-Commerce SEO.

Wie starten Sie ein Nuxt Projekt?

Wenn Sie wissen, was ist Nuxt und wie es rendert, folgt der Einstieg. Den Startbefehl nennt die offizielle Installationsseite. Zunächst braucht Ihr Rechner die Node.js Version, die die Dokumentation verlangt. Die genaue Anforderung ändert sich mit der Zeit, prüfen Sie daher die aktuelle stabile Version und den Hinweis in der Dokumentation.

  1. Erstellen Sie das Projekt im Terminal: npm create nuxt@latest beispiel-seite
  2. Wechseln Sie in den Projektordner und prüfen Sie, ob die Abhängigkeiten installiert sind.
  3. Starten Sie den Entwicklungsserver: npm run dev
  4. Öffnen Sie die lokale Adresse im Browser und legen Sie die erste Datei im Ordner pages an.

Der Befehl auf der Installationsseite kann auch ein Template Flag enthalten. Prüfen Sie die aktuelle Dokumentation, bevor Sie dieses Flag kopieren, denn das Standard Template kann sich zwischen Versionen ändern.

Denken Sie vom ersten Tag an auch an die Einstellungen für den Live Betrieb. Halten Sie Umgebungsvariablen, geheime Schlüssel und API Adressen aus dem Code heraus. Echte Schlüssel gehören nie ins Repository, in Beispieldateien nutzen Sie nur Platzhalter wie example.com.

Haben Sie schon ein älteres Projekt, können Sie auch nur die neuen, SEO relevanten Seiten nach Nuxt verlagern, statt bei null anzufangen.

Wie stellen Sie eine Nuxt Seite bereit?

Es gibt zwei Hauptwege: statische Dateien oder einen laufenden Node Server. Welcher passt, hängt von Ihrem Bedarf an Hybrid Rendering ab. Laut Dokumentation dient nuxt generate der statischen Ausgabe, das Node Server Preset dagegen einem laufenden Server.

Wenn Sie mit dem Node Server Preset bauen, erhalten Sie einen fertigen Einstiegspunkt. Den Befehl aus der Dokumentation sehen Sie unten, der Server lauscht standardmäßig auf Port 3000.

npx nuxt build
NODE_ENV=production node .output/server/index.mjs

Bei der statischen Methode legen Sie die Ausgabe auf günstiges statisches Hosting. Die Servermethode braucht dagegen Prozessverwaltung, Versionsupdates und Überwachung. Unsere verwandten Artikel zu Node.js Einrichtung und PM2 behandeln diese Seite im Detail.

Statische Ausgabe hat eine Grenze: Jede Änderung am Inhalt braucht einen neuen Build. Bei einem oft wechselnden Katalog heißt das, einen Veröffentlichungsablauf aufzubauen. Rendering auf dem Server nimmt Ihnen diese Last ab, bringt aber die Verantwortung für einen laufenden Prozess mit.

Lesen Sie bei der Wahl auch unseren Leitfaden zur Wahl des Webhostings. Die offizielle Seite zur Bereitstellung von Nuxt listet alle Presets auf.

Wann sollten Sie Nuxt wählen?

Nuxt ist sinnvoll für Projekte, die Inhalt und Interaktion verbinden wollen. Kennt Ihr Team Vue bereits, sinken die Umstiegskosten. Die Entscheidung sollte allerdings aus dem Geschäft kommen und nicht nur aus der Technik.

  • Sie bauen einen Katalog oder eine Inhaltsseite mit vielen dynamischen Seiten und wollen organischen Verkehr.
  • Öffentliche Seiten und ein Portal mit Login liegen im selben Projekt.
  • Sie wollen die Inhaltsverwaltung per Headless CMS trennen und das Frontend frei gestalten.
  • Ihr Team arbeitet schon mit Vue und sucht eine gemeinsame Projektstruktur.

Ein weiteres Kriterium ist die Arbeitsweise Ihres Redaktionsteams. Arbeiten Redakteure lieber in einer visuellen Oberfläche, koppeln Sie Nuxt mit einem Headless CMS. Sonst landet jede Textänderung bei einem Entwickler, und der Ablauf wird langsam.

Vor und Nachteile des Headless Ansatzes besprechen wir im Artikel zum Headless CMS. Brauchen Sie eine Individualentwicklung, deckt unsere individuelle Softwareentwicklung solche Projekte ab.

Was ist Nuxt nicht, und wann brauchen Sie es nicht?

Die ehrliche Antwort zieht auch eine Grenze: Nicht jede Website braucht Nuxt. Für eine Schaufensterseite mit fünf Seiten, einen Standard Blog oder einen einfachen Firmenauftritt ist ein ausgereiftes CMS oft günstiger und wartungsärmer.

Zudem brauchen Sie für den Betrieb von Nuxt ein Setup auf Node Basis, jemanden, der Versionsupdates verfolgt, und Disziplin bei der Bereitstellung. Gleicht der Ertrag Ihrer Seite diesen Aufwand nicht aus, entsteht nur unnötige Komplexität.

  • Eine kleine Schaufensterseite, deren Inhalt sich einmal pro Woche ändert.
  • Niemand im Team kann JavaScript.
  • Der Aufbau braucht nur einen Blog und wenige Formulare.
  • Ein Vorhaben, dessen Budget keinen Raum für Wartung und Updates lässt.

Für kleine Unternehmen liegt das echte Risiko nicht in der Technik, sondern im Fehlen einer Person für die Pflege. Verlässt der Entwickler das Projekt, kann eine Nuxt Seite ohne Besitzer zurückbleiben. Ein fertiges CMS hat einen größeren Kreis an Nutzern und Dienstleistern, die Übergabe fällt also leichter.

Bei der Entscheidung helfen Ihnen auch die Kriterien aus unserem Artikel WordPress oder individuelle Website.

Nuxt, Next.js oder WordPress: Was sollten Sie wählen?

Die drei Optionen passen zu unterschiedlichen Teams. Nuxt arbeitet mit Vue, Next.js mit React, und WordPress ist ein fertiges Content Management System. Next.js auf einem Server bereitzustellen, behandelt ein eigener Artikel dieser Serie, daher wiederholen wir es hier nicht.

KriteriumNuxtNext.jsWordPress
BasistechnikVueReactPHP und fertiges CMS
Passendes TeamEntwickler mit Vue KenntnissenEntwickler mit React KenntnissenRedaktionen, Agenturen
InhaltsverwaltungSie ergänzen sie separatSie ergänzen sie separatFertige Oberfläche
WartungsaufwandMittel bis hochMittel bis hochPflege von Plugins und Updates
FlexibilitätHochHochAbhängig von Plugins

Stellen Sie sich eine Frage: Kann mein Redaktionsteam veröffentlichen, ohne von einem Entwickler abzuhängen? Lautet die Antwort nein, ist die Zeile zum Wartungsaufwand für Sie die wichtigste.

Die Tabelle ist ein grober Rahmen und keine feste Rangliste. Für den Vergleich auf der React Seite hilft unser Vergleich von React und Angular.

Welche SEO Fehler treten auf Nuxt Seiten am häufigsten auf?

Auch ein richtiges technisches Fundament kann an Fehlern in der Umsetzung scheitern. Die Liste fasst Probleme zusammen, die bei JavaScript Seiten allgemein häufig sind. Sie gelten nicht nur für Nuxt, treten in Nuxt Projekten aber ebenso leicht auf.

  • Erstens bleiben derselbe Titel und dieselbe Beschreibung auf allen Routen.
  • Zweitens steht wichtiger Inhalt nur in Komponenten, die nach einem Klick oder Scrollen laden.
  • Außerdem bauen Sie Links mit Klick Ereignissen ohne href.
  • Ein Bereich mit Login bleibt versehentlich crawlbar, oder die Crawl Regeln sind zu weit gefasst.
  • Schließlich enthält die Sitemap die neuen Routen nicht.

Diese Punkte wirken simpel, doch ohne Prüfung vor dem Start übersehen Sie sie monatelang. Zum Beispiel legen Sie eine neue Kategorie an, die Route funktioniert, aber Sie vergessen den Eintrag in der Sitemap. Folglich gelangt die Seite spät oder nie in den Index.

Um diese Fehler zu finden, exportieren Sie zunächst die Routenliste mit unserem XML Sitemap Generator. Danach halten Sie die Regeln mit dem robots.txt Generator schlicht. Eine breitere Checkliste finden Sie in unserem Artikel zu technischem SEO.

Wie planen Sie die Wartung einer Nuxt Seite?

Eine Nuxt Seite ist mit dem Livegang nicht fertig. Pakete erhalten neue Versionen, die Node Version altert, und Sicherheitspatches erscheinen. Legen Sie die Person für diesen Kreislauf nicht zu Beginn fest, wird die Seite mit der Zeit anfällig.

Da wir kein Hosting betreiben, überlassen wir Details auf der Serverseite Ihrem Anbieter und der offiziellen Dokumentation. Als Projektinhaber sollten Sie trotzdem die Antworten auf diese Fragen kennen.

  • Wer führt die Updates durch, wie oft und mit welchem Testablauf?
  • Wie kehren Sie nach einem Fehler zur vorherigen Version der Seite zurück?
  • Wo liegen Ihre Backups, und haben Sie eine Wiederherstellung ausprobiert?
  • Wen erreichen Sie bei einem Ausfall, und über welchen Kanal?

Fehlen Ihnen die Antworten, ist statische Ausgabe oder eine verwaltete Plattform der sicherere Start. Denn Sie haben weniger Teile, um die Sie sich kümmern müssen.

Sollten Sie es selbst betreiben oder dem Hosting Anbieter überlassen?

Hier ziehen wir eine klare Linie. Möchten Sie Ihren eigenen VPS verwalten und haben Grundkenntnisse in Linux, Node und Sicherheit, setzen Sie die Befehle Schritt für Schritt um. Fehlt Ihnen dieses Wissen, überlassen Sie die Serverarbeit Ihrem Hosting Anbieter.

Denn ein offener Port, ein veraltetes Paket oder falsche Berechtigungen gefährden Ihre Seite. Wir betreiben kein Hosting. Bei Serversicherheit, Backups und Überwachung ist die Dokumentation Ihres Anbieters die maßgebliche Quelle.

  • Eine verwaltete Plattform oder statisches Hosting senkt also den Betriebsaufwand.
  • Ein eigener VPS gibt Ihnen Kontrolle, denn die Verantwortung liegt dann bei Ihnen.
  • Sind Sie unsicher, fragen Sie den Support des Anbieters, statt zu raten.

Die Seite der Datensicherung finden Sie in unserem Leitfaden zur Backup Strategie und in den Unterlagen Ihres Anbieters.

Was sollten Sie vor dem Start eines Nuxt Projekts prüfen?

Schreiben Sie vor der Wahl der Technik das Ziel der Arbeit auf. Die Reihenfolge unten ist ein einfacher Rahmen, den wir zur Festigung einer Entscheidung nutzen, und sie bietet keine Garantie. Nichts ersetzt die Antworten auf die Geschäftsfragen.

  1. Legen Sie das Hauptziel der Seite und die Zielseitentypen fest.
  2. Notieren Sie, wie oft sich der Inhalt ändert, und wählen Sie danach den Render Modus.
  3. Klären Sie, wer den Inhalt pflegt.
  4. Wählen Sie die Bereitstellungsmethode und die Person für die Wartung.
  5. Planen Sie für jede Route einen einmaligen Titel, eine Beschreibung und eine Canonical Adresse.
  6. Führen Sie vor dem Livegang Prüfungen zu Tempo, Crawling und Indexierung durch.

Wir empfehlen, diese Liste zu Projektbeginn gemeinsam in einem Termin auszufüllen. Viele Technikentscheidungen sind das späte Ergebnis unbeantworteter Geschäftsfragen. Ist das Ziel klar, erkennen Sie Render Modus, Bereitstellung und Teambedarf leicht.

Brauchen Sie bei diesem Ablauf Unterstützung, übernehmen unsere Leistung Webdesign und unsere SEO Beratung technische Entscheidung, Inhalt und Messung gemeinsam.

Zusammengefasst: Nuxt ist ein starkes Werkzeug, aber nicht jede Seite braucht es. Klären Sie zuerst Ziel, Team und Wartungsbudget, und wählen Sie dann den Render Modus.

Häufig gestellte Fragen

Ist Nuxt kostenlos?
Nuxt ist ein quelloffenes Framework, deshalb zahlen Sie keine Lizenzgebühr für die Nutzung. Die Projektkosten sind trotzdem nicht null. Sie müssen Aufwand für Entwicklung, Hosting, Wartung und Updates einplanen. Die genauen Kosten hängen von der Größe Ihres Projekts und von der gewählten Bereitstellungsmethode ab.
Muss man Vue kennen, um Nuxt zu lernen?
Ja. Nuxt baut auf Vue auf, daher sollten Sie zuerst Komponenten, reaktiven Zustand und Templates in Vue verstehen. Danach fällt es viel leichter, die Ordnerstruktur, das Routing und die Funktionen zum Datenabruf von Nuxt zu lernen. Wer bei null anfängt, übt zuerst die Grundlagen von Vue und wechselt dann zu Nuxt.
Verbessert Nuxt immer das SEO?
Nein, Nuxt garantiert allein keine Rankings. Rendering auf dem Server erleichtert es, Inhalt im ersten HTML auszuliefern, und räumt Hindernisse für Bots aus. Inhaltsqualität, interne Links, Seitentempo und einmalige Meta Tags entscheiden aber weiterhin. Nuxt stärkt das technische Fundament, den Rest der Arbeit erledigen weiter Sie.
Sollten Sie bei Nuxt eine statische Seite oder einen Server wählen?
Ändert sich Ihr Inhalt selten, ist statische Ausgabe günstiger und leichter zu warten. Haben Sie oft wechselnde Seiten oder Bereiche für angemeldete Nutzer, brauchen Sie einen laufenden Server. Hybrid Rendering verbindet beides in einem Projekt, funktioniert aber nicht mit nuxt generate. Prüfen Sie zuerst, wie oft Ihr Inhalt sich ändert.
Brauchen Sie Nuxt für eine kleine Firmenwebsite?
Meistens nicht. Für eine Seite mit wenigen Unterseiten oder einen Standard Blog ist ein ausgereiftes CMS günstiger und wartungsärmer. Nuxt wird sinnvoll, wenn Ihr Team Entwickler mit Vue Kenntnissen hat und Sie eine eigene Oberfläche oder dynamische Inhalte brauchen, die ein fertiges CMS nicht liefern kann.
Sollten Sie das Hosting einer Nuxt Seite selbst verwalten?
Fehlt Ihnen genug Wissen zu Linux, Node und Sicherheit, ist eine verwaltete Plattform oder ein Hosting Anbieter sicherer. Ein eigener VPS gibt Ihnen Kontrolle, überlässt Ihnen aber auch Updates, Backups und Überwachung. Sind Sie unsicher, fragen Sie den Support Ihres Anbieters und folgen Sie dessen Dokumentation.
  • nuxt
  • vue.js
  • ssr
  • javascript seo
  • hybrid rendering
  • webentwicklung
  • technisches seo
Teilen:
Talha Aslan

Google Partner und Experte für digitales Marketing. Seit 2012 praktisch in SEO, Google Ads, Webdesign und E-Commerce Projekten; jeder Beitrag hier stammt aus dieser Erfahrung.

Nächstes Projekt

Sprechen wir über Ihr Projekt.

Ihre Anfrage geht direkt an Talha Aslan und Team: Strategie von Talha, Umsetzung durch ein erfahrenes Team. Das Erstgespräch ist kostenlos, wir hören zu und melden uns mit einer klaren Roadmap.