Unterschied zwischen Next.js und React: Wann passt was?

Was ist der Unterschied zwischen Nextjs und React?

React ist eine JavaScript Bibliothek für Benutzeroberflächen. Next.js ist ein Framework auf Basis von React und ergänzt Routing, Rendering auf dem Server, Datenabruf, Caching und ein fertiges Build Setup. Kurz gesagt: React liefert die Bausteine, Next.js legt fest, wie daraus eine vollständige Website entsteht und ausgeliefert wird.

Dieser Satz fasst den Unterschied zwischen Nextjs und React zusammen. Entscheiden Sie trotzdem nicht allein danach. Schauen Sie zunächst, welches Problem jedes Werkzeug löst. Der Unterschied zeigt sich weniger im Schreiben von Komponenten, sondern vor allem in der Projektstruktur.

Deshalb erklären wir in diesem Ratgeber die Lücke in klarer Sprache. Außerdem belegen wir technische Aussagen mit offiziellen Quellen. Bei schnell veränderlichen Details wie Versionsnummern und Befehlen prüfen Sie bitte immer die aktuelle Dokumentation.

Was bietet React allein?

Konkret bietet React Ihnen die Logik für Komponenten. Zunächst teilen Sie die Oberfläche in kleine Teile auf, und React aktualisiert den Bildschirm, sobald sich Daten ändern. Zum Beispiel schreiben Sie Buttons, Formulare, Produktkarten und Filterleisten nach demselben Muster. Deshalb nutzen viele Teams React für interaktive Oberflächen.

Andererseits liefert React allein kein Gerüst für eine ganze Website. Stattdessen wählen Sie Router, Datenabruf, Rendering auf dem Server und Build Werkzeuge selbst. Dennoch sagt die offizielle React Dokumentation das deutlich. Sie empfiehlt, eine neue App mit einem Framework zu beginnen. Quelle: React Dokumentation, Seite zum Start einer neuen App.

Zudem räumt dieselbe Seite ein, dass Sie auch bei null beginnen können. Sie nennt außerdem den Preis: Sie müssen Werkzeuge für Routing, Datenabruf und andere Standardmuster auswählen. Konkret bauen Sie dann Ihr eigenes Framework.

• Das bietet React: Komponenten, Zustand, Ereignisbehandlung und wiederverwendbare Oberflächenteile.
• Dagegen fehlt: ein fertiges Routing Schema, Renderwahl pro Seite und Regeln für den Datenabruf auf dem Server.
• Außerdem verlangt React von Ihnen: eigene Entscheidungen zu Build Werkzeug, Router und Datenschicht.

Was ergänzt Next.js gegenüber React?

Next.js schließt die Lücken eines React Projekts mit einer fertigen Struktur. Erstens legt die Dateistruktur das Routing fest. Zweitens wählen Sie für jede Seite einen Rendermodus. Außerdem können Sie Daten auf dem Server abrufen, das Ergebnis zwischenspeichern und stückweise an den Browser senden.

Die Next.js Dokumentation stellt den App Router als Hauptweg vor. Dabei sind Layouts und Seiten also standardmäßig Server Components. Sie rufen also Daten auf dem Server ab, bauen dort einen Teil der Oberfläche und senden das Ergebnis an den Client.

Next.js bringt zudem Gewohnheiten wie Code Splitting und das Vorladen von Links mit. Die Link Komponente erweitert zum Beispiel den normalen Anchor Tag um Prefetching und Navigation im Client. Anders gesagt: Next.js ersetzt React nicht. Sie schreiben weiterhin React Komponenten, und das Framework steuert, wo und wann sie laufen.

Nehmen wir eine Rechnerseite als Beispiel. Zum Beispiel schreiben Sie Eingabefelder, Ergebnisfeld und Prüflogik bequem in React. Allerdings gehört die Frage, wie die Seite ihre URL, ihren Titel und crawlbares HTML bekommt, nicht zu React. Somit füllt ein Framework diese Lücke.

Was bedeuten CSR, SSR, SSG und ISR?

Zunächst beschreiben diese vier Kürzel, wo und wann das HTML einer Seite entsteht. Die Wahl beeinflusst Geschwindigkeit und Sichtbarkeit in der Suche. web.dev erklärt die Begriffe in einem Artikel. Quelle: web.dev, Rendering im Web.

• CSR (Rendering im Client): Der Browser baut die Seite mit JavaScript auf. Das ist flexibel, allerdings kann die Reaktionszeit leiden, wenn das JavaScript wächst.
• SSR (Rendering auf dem Server): Der Server erzeugt bei jeder Anfrage HTML. Die erste Darstellung wird schneller, doch die Arbeit des Servers kann die Zeit bis zum ersten Byte verlängern.
• SSG (statische Erzeugung): Seiten liegen nach dem Build als fertiges HTML vor. Das ist schnell, aber schwierig bei URLs, die Sie nicht vorhersehen können.
• ISR (Incremental Static Regeneration): Sie erneuern eine statische Seite im Hintergrund, ohne die ganze Website neu zu bauen.

In der Praxis läuft ein einfaches React Projekt meist als CSR. Next.js lässt Sie dagegen alle vier Verfahren in einem Projekt mischen, Seite für Seite. Hier spüren Sie den Unterschied also am stärksten.

Ein einfaches Beispiel hilft. Eine Über uns Seite ändert sich selten, daher passt die statische Erzeugung. Ein Blogindex ändert sich oft, deshalb eignet sich ISR. Die Bestellhistorie eines Nutzers ist persönlich, also muss der Server sie bei jeder Anfrage erzeugen.

Wie funktioniert ISR in der Praxis?

ISR behält die Geschwindigkeit einer statischen Seite und hält den Inhalt trotzdem aktuell. Laut Next.js Dokumentation entsteht die Seite zunächst beim Build. Läuft die von Ihnen gesetzte Zeit ab, liefert die nächste Anfrage zunächst noch die alte Seite schnell aus. Danach baut Next.js im Hintergrund eine neue Version.

Dafür gibt es zwei Auslöser. Erstens nutzen Sie für die zeitbasierte Erneuerung die Einstellung revalidate. Zweitens rufen Sie, soll die Seite bei einer Inhaltsänderung neu entstehen, rufen Sie revalidatePath oder revalidateTag auf. Quelle: Next.js Leitfaden zu ISR.

Beachten Sie außerdem die Grenzen. Die Dokumentation nennt nämlich die Node.js Laufzeit als Voraussetzung. Der Modus für den statischen Export unterstützt ISR dagegen nicht. Betreiben Sie mehrere Instanzen, müssen Sie zudem planen, wie sie den Cache teilen.

Zum Beispiel können Sie in einem Katalog mit häufigen Produktänderungen die Seiten stündlich erneuern. Live Daten wie den Lagerbestand holen Sie dann frisch im Browser. So balancieren Sie Tempo und Aktualität aus.

Wie arbeiten Routing und App Router?

Next.js nutzt Routing über das Dateisystem. Ordner legen URL Abschnitte fest, und die Dateien page und layout beschreiben die Oberfläche unter dieser Adresse. Ein Ordnername in eckigen Klammern wird zum dynamischen Abschnitt. Folglich erzeugt eine einzige Vorlage tausende Produktseiten.

Das Beispiel unten zeigt die Dateistruktur für die URL eines Blogbeitrags im App Router. Die Dateinamen folgen der Dokumentation.

app/
  layout.js
  page.js
  blog/
    page.js
    [slug]/
      page.js

In einem einfachen React Projekt lösen Sie das mit einer Routing Bibliothek. Das ist also eine eigene Entscheidung. Bibliothek, URL Verwaltung und Datenladen verbinden Sie selbst.

Außerdem bringen Layouts noch einen Vorteil. Laut Dokumentation behalten Layouts beim Navigieren ihren Zustand und rendern nicht neu. Für feste Teile wie das Hauptmenü oder eine Seitenleiste ergibt das also eine schnelle und aufgeräumte Struktur.

Was ist der Unterschied zwischen Server Components und Client Components?

Eine Server Component läuft auf dem Server und erzeugt Oberfläche, ohne ihr JavaScript an den Browser zu senden. Dagegen läuft eine Client Component im Browser und behandelt Klicks und Formulareingaben. Im App Router sind Layouts und Seiten standardmäßig Server Components, so steht es in der Next.js Dokumentation.

Eine Client Component erstellen Sie, indem Sie die Anweisung use client an den Dateianfang schreiben. In der Praxis zieht die Dokumentation eine klare Linie. Nutzen Sie Client Components, wenn Sie Zustand, Event Handler oder Browser Schnittstellen brauchen. Nutzen Sie dagegen Server Components, um Daten nah an der Quelle abzurufen, Geheimnisse zu schützen und weniger JavaScript zu senden.

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Quelle: Next.js Dokumentation zu Server Components und Client Components. Diese Trennung kann anfangs verwirren, denn in einfachem React läuft alles im Browser. Probieren Sie es zunächst auf einer kleinen Seite aus.

Nextjs oder React: Was ändert sich für die SEO?

Google crawlt, rendert und indexiert JavaScript Seiten. Zunächst bestätigt Google Search Central, dass Google JavaScript verarbeiten kann. Derselbe Leitfaden sagt aber auch, dass Rendering auf dem Server oder Prerendering weiterhin eine gute Idee ist, weil es die Seite für Nutzer und Crawler schneller macht. Quelle: Google Search Central, Grundlagen der JavaScript SEO.

Ein reines Projekt mit Rendering im Client bedeutet also keine Unsichtbarkeit. Dennoch ist es der sicherere Weg, den Inhalt schon in der ersten HTML Antwort mitzuliefern. Next.js hält Sie dagegen standardmäßig nah an diesem Weg. In einfachem React brauchen Sie dafür dagegen zusätzliche Infrastruktur.

Weitere Hinweise aus demselben Leitfaden gelten für beide Optionen:

• Schreiben Sie Links als echte Anchor Tags mit href.
• Nutzen Sie die History API für saubere URLs, statt URL Fragmente zu verwenden.
• Schließlich geben Sie auf Fehlerseiten einen echten 404 zurück oder setzen Sie noindex.

Grundlagen wie Meta Tags und robots Regeln erstellen Sie mit unserem Meta Tag Generator und dem robots.txt Generator. Für das größere Bild lesen Sie außerdem unsere Tipps zu technischer SEO.

Wie verwaltet Next.js Meta Tags, Sitemap und robots Datei?

Laut Next.js Dokumentation definieren Sie Metadaten im App Router auf zwei Wegen. Erstens exportieren Sie für feste Werte ein metadata Objekt. Zweitens schreiben Sie für datenabhängige Werte die Funktion generateMetadata. Das Framework erzeugt dann die passenden Head Tags. Quelle: Next.js Dokumentation zu Metadaten und OG Bildern.

Das hilft bei Websites mit tausenden Produkt oder Blogseiten. Zum Beispiel holen Sie Titel und Beschreibung jedes Beitrags aus einer Datenbank und schreiben sie automatisch in die Seite. Außerdem beschreibt die Dokumentation eigene Dateikonventionen für robots.txt und sitemap.xml.

Allerdings sollten Sie eine Grenze kennen. Laut Dokumentation funktionieren das metadata Objekt und die Funktion generateMetadata nur in Server Components. Setzen Sie sie daher nicht in eine Client Component.

In einfachem React wählen Sie für dieselbe Aufgabe meist eine eigene Bibliothek oder bauen eine Lösung von Hand. Das erzeugt also Pflegeaufwand. Auf großen Inhaltsseiten bringt die eingebaute Lösung deshalb spürbare Einfachheit.

Was ist schneller bei Ladezeit und Core Web Vitals?

Eine fertige Antwort gibt es nicht, denn die Geschwindigkeit hängt stärker von Ihrer Anwendung ab als vom Framework. Next.js kann über Server Components das an den Client gesendete JavaScript verringern, und die Dokumentation hebt diesen Gewinn hervor. Dennoch bremsen riesige Bilder und schwere Skripte von Drittanbietern beide Optionen aus.

Außerdem wächst laut web.dev das nötige JavaScript bei CSR mit der App, und das kann die Reaktionszeit belasten. Statisches Rendering liefert dagegen eine durchgängig schnelle Zeit bis zum ersten Byte. Bei SSR kostet die Arbeit auf dem Server Zeit, daher kann diese Zeit steigen.

Entscheiden Sie also nicht ohne Messung. Beginnen Sie zunächst mit einem Google Lighthouse Test. Vergleichen Sie danach Ihre Core Web Vitals mit echten Felddaten.

Den Einfluss von JavaScript auf das Tempo haben wir in JavaScript Ladezeit optimieren beschrieben. Für den größeren Rahmen lesen Sie wie die Ladezeit die SEO beeinflusst.

Wann reicht einfaches React aus?

Einfaches React reicht für Anwendungen, die keinen Suchverkehr erwarten, hinter einem Login liegen und vor allem aus Interaktion bestehen. Dazu gehören zum Beispiel Admin Bereiche, interne Werkzeuge, Kundenportale und Rechner. Denn diese Bildschirme muss Google nicht indexieren.

Einfaches React passt auch, wenn Sie eine kleine Interaktion in eine bestehende Seite einbauen. Zum Beispiel eignet sich ein Preisrechner oder ein mehrstufiges Formular. Somit sparen Sie das zusätzliche Gewicht eines Frameworks.

Ein konkreter Fall: Ein Logistikunternehmen öffnet für seine Händler ein Bestellverfolgungsportal hinter einem Login. Außerdem sehen Suchmaschinen diese Bildschirme nie. Rendering auf dem Server bringt also wenig, und einfaches React genügt.

Kleine Teams haben einen weiteren Grund: den Lernaufwand. Zum Beispiel verlangen Server Components, Caching und Rendermodi ein neues Denkmodell. Braucht das Projekt sie nicht, gewinnt die Einfachheit.

• Bereiche hinter dem Login und interne Werkzeuge.
• Anwendungen ohne Bedarf an Suchverkehr.
• Kleine Oberflächenteile in einer bestehenden Seite.
• Erfahrene Teams, die ihre eigene Struktur bauen möchten.

Wann sollten Sie Next.js wählen?

Bauen Sie eine öffentliche Website mit vielen Seiten und erwarten Suchverkehr, ist Next.js ein starker Kandidat. Zum Beispiel sind Inhaltsseiten, Firmenauftritte, Blogs, Kategorie und Produktseiten typische Fälle. Denn die Renderwahl pro Seite passt zu diesen Aufgaben.

Next.js hilft zudem, wenn ein Projekt statische und dynamische Seiten braucht. Zum Beispiel erzeugen Sie Firmenseiten statisch und die Kontoseite eines Nutzers dynamisch. Früh zu entscheiden kostet also weniger als eine spätere Migration.

Stellen Sie sich diese Fragen:

1. Sollen meine Seiten bei Google gefunden werden?
2. Erzeuge ich hunderte oder tausende Seiten aus einer Vorlage?
3. Aktualisiere ich Inhalte oft, ohne jedes Mal neu zu bauen?
4. Ist mein Team bereit, Konzepte für den Server zu lernen?

Lauten die ersten drei Antworten ja, dann neigen Sie zu Next.js. Lautet die vierte nein, starten Sie zunächst einen kleinen Pilot.

Sind die Antworten dagegen gemischt, warten Sie eine Woche und bauen zwei kleine Prototypen. Zunächst bauen Sie dieselbe Seite in einfachem React und in Next.js. Vergleichen Sie danach Einrichtungszeit, erste HTML Ausgabe und das Gefühl im Team. So holen Sie die Debatte von Annahmen zur Messung.

Unterschied zwischen Nextjs und React bei einer Firmenwebsite: Was bedeutet das?

Auf einer Firmenwebsite zählt vor allem, dass Leistungsseiten auffindbar und schnell sind. Deshalb hat der Unterschied zwischen Nextjs und React hier eine konkrete Wirkung. Zum Beispiel kommen statisch erzeugte Leistungsseiten schnell an. Dasselbe Tempo mit reinem Rendering im Client erreichen Sie nur mit zusätzlicher Infrastruktur.

Ein Beispielszenario: Stellen Sie sich eine Website mit fünf Leistungsseiten, einem Blog und einem Kontaktformular vor. Zunächst erzeugen Sie Leistungs und Blogseiten statisch. Dann wird das Kontaktformular eine kleine Client Component. Der größte Teil der Website kommt dann als fertiges HTML an, und das Formular bleibt interaktiv.

Wer pflegt aber die Inhalte? Programmiert Ihr Marketingteam nicht, denken Sie über Next.js mit einem Headless CMS nach. Sind die Anforderungen an das Backend einfach, helfen die Kriterien aus WordPress oder individuelle Website.

Bei Firmenprojekten entscheiden Sie Webdesign und individuelle Softwareentwicklung am besten gemeinsam.

Unterschied zwischen Nextjs und React im E-Commerce: Was ändert sich?

Im E-Commerce müssen Produkt und Kategorieseiten auffindbar und schnell sein. Warenkorb, Kasse und Kundenkonto sind dagegen interaktiv. Next.js deckt beide Bedürfnisse in einem Projekt ab. Produktseiten rendern Sie auf dem Server, den Warenkorb steuern Sie mit einer Client Component.

Denn Tempo beeinflusst den Umsatz. Wir haben das in Ladezeit im Onlineshop und Umsatz behandelt. Next.js garantiert dieses Tempo nicht, aber bei guter Einrichtung bietet es eine solide Basis.

Ein Beispielszenario: Ihr Katalog enthält viele Produkte. Zunächst erneuern Sie mit ISR Produktseiten in festen Abständen. Dann holen Sie Live Informationen wie Preis und Bestand frisch im Browser. So entsteht eine Struktur, die schnell und aktuell zugleich ist.

Ein weiterer Fall sind außerdem Kategoriefilter. Die Filteroberfläche wird eine Client Component, aber Sie entscheiden, welche gefilterten Ergebnisseiten in den Index gehören. Allerdings kann es Crawl Budget verschwenden, jede Filterkombination zur Indexierung freizugeben. kann Crawl Budget verschwenden. Kurz gesagt ist das eine SEO Entscheidung, unabhängig vom Framework.

Deckt eine fertige E-Commerce Plattform Ihre Anforderungen bereits ab, brauchen Sie womöglich kein eigenes Framework. Mit einer E-Commerce Beratung klären Sie Ihren Bedarf, bevor Sie entscheiden.

Wie lesen Sie die Vergleichstabelle zu Next.js und React?

Die Tabelle unten stellt beide Ansätze mit denselben Kriterien nebeneinander. Einfaches React meint hier ein React Projekt, das Sie aus selbst gewählten Werkzeugen zusammensetzen. Dabei ist die Tabelle nur eine allgemeine Zusammenfassung. In einem echten Projekt verschieben Teamerfahrung und Budget das Gewicht jeder Zeile.

Wo stehen Vue, Nuxt und Angular?

Next.js ist das Framework der React Familie. In der Vue Familie übernimmt Nuxt eine ähnliche Rolle. Diese Frage haben wir für die Vue Welt in Was ist Nuxt beantwortet. Deshalb wiederholen wir sie hier nicht.

Angular dagegen folgt einer anderen Philosophie. Es ist ein umfassenderes Framework mit festeren Regeln. Wählen Sie zwischen React und Angular, hilft der Vergleich in React gegen Angular.

Auch die Sprachfrage zählt. In der Praxis nutzen die meisten Teams Next.js mit TypeScript. Für diese Entscheidung lesen Sie TypeScript oder JavaScript.

Die allgemeine Regel ist also einfach. Wählen Sie das Ökosystem, das Ihr Team kennt, solange es zum Bedarf passt. Richtig ist das Framework, das Sie pflegen können, nicht das modische.

Wo hosten Sie ein Next.js Projekt, und wie beeinflusst das die Hostingwahl?

Die Next.js Dokumentation nennt mehrere Wege für die Bereitstellung: einen Node.js Server, einen Docker Container, den statischen Export und plattformspezifische Adapter. Laut Plattformtabelle im ISR Leitfaden unterstützen Node.js Server und Docker ISR. Der statische Export unterstützt es dagegen nicht.

Diese Tabelle wirkt daher direkt auf Ihre Hostingwahl. Ein günstiges Shared Paket, das nur statische Dateien ausliefert, passt womöglich nicht zu Modi mit Node.js. Lesen Sie vor der Entscheidung Webhosting auswählen.

Wir sind ein Team für digitales Marketing und Web, kein Hostinganbieter. Deshalb behandeln wir hier weder Servereinrichtung noch Betrieb. Für die Schritte der Bereitstellung verlassen Sie sich auf die offizielle Dokumentation und die Unterlagen Ihres Anbieters.

Wenn Sie wissen möchten, welche Domain Einträge Ihre Website nutzt, hilft Ihnen die DNS Abfrage.

Mit welchem Befehl starten Sie ein Testprojekt?

Die Next.js Dokumentation verweist für ein neues Projekt auf das Werkzeug create next app. Der folgende Befehl stellt dann die Einrichtungsfragen Schritt für Schritt. Prüfen Sie die aktuelle Form des Befehls und seine Optionen immer auf der offiziellen Installationsseite.

npx create-next-app@latest

Nach der Einrichtung starten Sie den lokalen Entwicklungsserver. Danach führen Sie für einen Test des Produktionsbuilds die Befehle für Build und Start aus. Möchten Sie ISR unter realistischen Bedingungen sehen, empfiehlt die Dokumentation, lokal zu bauen und zu starten.

Stellen Sie dieses Testprojekt trotzdem nicht auf ein Livesystem. Bauen Sie zunächst auf Ihrem eigenen Rechner eine Seite, eine dynamische URL und eine Client Component. Öffnen Sie danach die Entwicklerwerkzeuge des Browsers, sehen Sie sich den Quelltext an und prüfen Sie, ob der Inhalt schon im ersten HTML ankommt.

Ist der Umzug eines bestehenden React Projekts auf Next.js schwierig?

Ihre Komponenten sind bereits React, daher nutzen Sie den größten Teil weiter. Konkret wird es schwierig bei Routing, Datenabruf und Code, der nur im Browser läuft. Komponenten, die window oder localStorage nutzen, brauchen die Markierung als Client Component. Die Dokumentation empfiehlt Client Components für solche Browser Schnittstellen.

Beim Umzug können Sie diese Schritte gehen:

1. Zunächst wandeln Sie die Routing Struktur in das Ordnerschema um.
2. Dann verlegen Sie öffentliche, suchrelevante Seiten auf die Serverseite.
3. Danach trennen Sie interaktive Teile in kleine Client Components.
4. Schließlich richten Sie Weiterleitungen von alten auf neue URLs ein.

Ändern sich URLs, entsteht außerdem ein SEO Risiko. Ohne dauerhafte Weiterleitungen von alten auf neue Adressen können Sie Rankings verlieren. Daher ist es sinnvoll, den Umzugsplan gemeinsam mit einer SEO Beratung zu führen.

Wie unterscheiden sich die Gesamtkosten beider Optionen?

Softwarekosten bestehen nicht nur aus dem ersten Bau. Vor allem entsteht der größere Anteil durch Pflege, Updates und Teamwechsel über die Jahre. Next.js wirkt hier in beide Richtungen. Zum Beispiel hilft die fertige Struktur neuen Entwicklern, das Projekt zu verstehen. Andererseits kommen mehr Konzepte hinzu, die man lernen muss.

In einfachem React entsteht dagegen jedes Projekt ein wenig anders. Das eine nutzt einen anderen Router, das andere eine andere Datenschicht. Diese Freiheit kann also mit wachsendem Team zu Uneinheitlichkeit werden. Ein Framework schafft dagegen eine gemeinsame Sprache.

Rechnen Sie außerdem Framework Updates ein. Denn bei jedem großen Release können sich einzelne Gewohnheiten ändern. Planen Sie deshalb Versionswechsel ein und lesen Sie die Hinweise zur Migration in der offiziellen Dokumentation.

• Fragen Sie schon am Anfang nach der Erfahrung der Person, die pflegt.
• Reservieren Sie regelmäßig Zeit für Versionsupdates.
• Halten Sie die Projektstruktur in einem kurzen Dokument fest.

Welche Fehler passieren bei der Entscheidung am häufigsten?

Der erste Fehler ist, ein Framework wegen des Trends zu wählen. Dabei hat jedes Projekt nämlich andere Anforderungen. Vor allem Lernzeit des Teams und Pflegekosten wiegen meist schwerer als technische Vorteile. Zweitens ist ein Fehler, Tempo allein vom Framework zu erwarten. Bildgrößen und Skripte von Drittanbietern bestimmen die Geschwindigkeit unabhängig vom Framework.

Der dritte Fehler ist, die SEO ans Ende zu schieben. Rendermodus und URL Struktur legen Sie am Anfang fest, und eine spätere Änderung ist mühsam. Der vierte Fehler ist, jede Komponente zur Client Component zu machen. Die Dokumentation rät stattdessen, nur die interaktiven Teile zu markieren.

• Ein Framework nach Beliebtheit wählen.
• Tempo versprechen, ohne zu messen.
• URL und Renderentscheidungen ans Ende schieben.
• Ein ganzes Layout ohne Not zur Client Component machen.
• Beim Umzug keinen Plan für Weiterleitungen erstellen.

Wann sollten Sie es nicht selbst tun und einem Anbieter überlassen?

Übernehmen Sie Servereinrichtung, Sicherheitsupdates und Backups im Livebetrieb nicht ohne Erfahrung. Stattdessen überlassen Sie das Ihrem Hostinganbieter oder einem erfahrenen Infrastrukturteam. Denn eine falsche Einstellung kann Ihre Website verlangsamen und zugleich angreifbar machen.

Kennen Sie auch beim Code Ihre Grenzen. Denn ein Projekt mit Kundendaten oder Zahlungsabläufen braucht Erfahrung für Architekturentscheidungen. Starten Sie in diesem Fall mit einem kleinen Pilot und holen Sie fachlichen Rat ein.

Manches können Sie dagegen selbst tun. Diese Aufgaben haben ein geringes Risiko, und Sie machen sie schnell rückgängig:

• Ein Testprojekt auf dem lokalen Rechner einrichten.
• Ihre aktuelle Website mit Lighthouse messen.
• Einen Plan entwerfen, wie Sie Komponenten in Server und Client aufteilen.

Testen Sie jeden Schritt, der ein Livesystem berührt, zuerst in einer Testumgebung.

Welche Checkliste hilft bei der Entscheidung?

Die Liste unten hilft Ihnen, Ihr Projekt schnell einzuordnen. Zunächst beantworten Sie jede Frage ehrlich. Zeigen die meisten Antworten dann in eine Richtung, ist die Entscheidung klar.

1. Sind die Seiten öffentlich oder hinter einem Login?
2. Ist Suchverkehr ein Geschäftsziel?
3. Gibt es hunderte oder tausende Seiten?
4. Aktualisiert das Redaktionsteam oft?
5. Hat das Team Erfahrung mit React?
6. Kann Ihr Hosting Node.js ausführen?

Sind die ersten vier Antworten ja und die sechste ebenfalls, ist Next.js eine vernünftige Wahl. Liegt die erste Antwort hinter dem Login und die zweite ist nein, reicht einfaches React. In Mischfällen lehrt also ein kleines Testprojekt mehr als eine Debatte.

Endet die Checkliste unentschieden, schauen Sie auf die Kosten. Wählen Sie also die Option, die sich leichter zurücknehmen lässt. Eine falsche Entscheidung im kleinen Pilot kostet wenige Tage. Im großen Livesystem dagegen kostet sie Monate.

Halten Sie die Entscheidung zum Schluss schriftlich fest. Schreiben Sie die Gründe für das Framework auf eine Seite. Wer das Projekt Jahre später übernimmt, trifft den richtigen Schritt, wenn er die Gründe kennt.