SSR, SSG oder ISR für jede Route einer Next.js-App wählen

Lege für jede Route deines Next.js-Projekts die Rendering- und Caching-Strategie fest (statisch, ISR, dynamisch, Streaming, Client) mit begründeter Tabelle, Beispielcode und Prüfweg. Entwickelt für ChatGPT, Claude, Gemini und Microsoft Copilot. Er enthält 4 anpassbare Variablen und lässt sich kostenlos mit einem Klick kopieren.

Experte · Text · Redaktionelle Prüfung ausstehend

Prompt

Arbeite als Architekt mit Schwerpunkt auf dem Next.js App Router, Web-Performance und technischem SEO.

Kontext:
- Projekt: {{projekt}}
- Routen und Aktualität der Daten: {{routen}}
- Hosting: {{hosting}}
- Next.js-Version: {{next_version}}

Fehlen entscheidende Informationen (welche Routen von der Nutzersitzung abhängen, wie oft sich Daten ändern, ob Inhalte aus einem CMS mit Webhooks kommen), frag nach, bevor du entscheidest.

Liefere:
1. Eine Tabelle pro Route: Strategie (statisch beim Build, statisch mit zeitbasierter oder bedarfsgesteuerter Revalidierung, dynamisch pro Request, Streaming mit Suspense, clientseitiges Laden), Begründung, Datenquelle, Auswirkung auf SEO und Time to First Byte.
2. Wie Inhalte jeweils invalidiert werden (zeitbasiert, revalidatePath oder revalidateTag aus einem Webhook) und was passiert, wenn die Revalidierung fehlschlägt.
3. Was eine Route ungewollt dynamisch macht (Cookies, Header, Suchparameter, ungecachte fetch-Aufrufe) und wie man den personalisierten Teil isoliert, damit der Rest statisch bleibt.
4. Kurzen Beispielcode für zwei bis drei repräsentative Routen.
5. Einschränkungen von {{hosting}}, die die Entscheidung beeinflussen (etwa: Ein statischer Export kann nicht pro Request rendern).
6. Prüfweg: was die Ausgabe von `next build` je Route zeigt und welche Cache-Header in Produktion zu kontrollieren sind.

Vorgaben:
- Das Standard-Caching hat sich zwischen Next.js-Versionen geändert: Nenne deine Annahme für {{next_version}} und empfiehl den Abgleich mit der offiziellen Dokumentation dieser Version.
- Erfinde keine Performance-Kennzahlen; Schätzungen kennzeichnest du als solche.
- Bevorzuge statisch, wann immer die Aktualitätsanforderungen es erlauben.

Format: Haupttabelle, kurze Abschnitte je Thema und eine abschließende Risikoliste.

So verwenden Sie ihn

  1. Liste deine echten Routen mit Änderungshäufigkeit und Nutzerbezug auf. 2. Nenne Hosting und genaue Next.js-Version. 3. Setze die Tabelle um und prüfe vor dem Release die Ausgabe von next build.

Anwendungsbeispiel

Projekt: Möbelshop mit Blog · Routen: /, /produkte/[slug] (Preise ändern sich täglich), /blog/[slug], /konto (privat) · Hosting: Vercel · Version: Next.js 15.

Beispielergebnis

Annahme: Next.js 15, in dem fetch nicht mehr standardmäßig gecacht wird. Prüfen Sie die offizielle Dokumentation Ihrer Version.

Strategie pro Route

RouteStrategieGrundInvalidierung
/Statisch mit RevalidierungÄndert sich wöchentlichrevalidateTag('home') aus dem CMS
/produkte/[slug]Statisch + ISR; Preis und Bestand in einem Suspense-BlockSEO braucht schnelles HTML; Bestand ändert sich täglichrevalidateTag('produkt:slug') bei Bestandsänderung
/blog/[slug]Statisch mit generateStaticParamsÄndert sich seltenrevalidatePath per CMS-Webhook
/kontoDynamisch pro RequestPrivat, pro Nutzer; liest CookiesKein Cache

Was eine Route versehentlich dynamisch macht

  • cookies() oder headers() in einem gemeinsamen Layout lesen: Das zieht alle Unterrouten mit.
  • searchParams auf der Produktseite für einen Nebenfilter nutzen.

Lösung: Den personalisierten Teil (Warenkorb, Begrüßung) in eine Client-Komponente oder einen Suspense-Block auslagern, damit der Rest statisch bleibt.

Prüfen

In der Ausgabe von next build ist jede Route als statisch (○), SSG (●) oder dynamisch (ƒ) markiert. Steht /produkte/[slug] auf ƒ, liest etwas Request-Daten …

Wichtige Fakten

Kategorie
Programmierung & Entwicklung · Next.js
Ausgabetyp
Text
Niveau
Experte
Entwickelt für
ChatGPT, Claude, Gemini und Microsoft Copilot
Verifiziert in
Redaktionelle Prüfung ausstehend
Variablen
Projekt, Routen und Datenaktualität, Hosting und Next.js-Version
Sprache
Deutsch
Preis
Kostenlos, ohne Anmeldung
Aktualisiert
07.11.2026

Häufig gestellte Fragen

Was ist der Unterschied zwischen SSG und ISR?

Bei SSG entsteht die Seite beim Build und bleibt bis zum nächsten Deployment gleich. Bei ISR wird sie statisch ausgeliefert, aber nach einem Intervall oder auf Anforderung neu erzeugt, ohne neues Deployment.

Ist Server-Rendering immer besser für SEO?

Für SEO zählt, dass das initiale HTML den Inhalt enthält. Eine statische oder ISR-Seite schafft das genauso wie SSR und ist meist schneller und günstiger auszuliefern.

Warum wird eine Route ungewollt dynamisch?

Meist, weil sie Cookies, Header oder Suchparameter liest oder ein ungecachtes fetch ausführt. Der Prompt hilft dir, diese Aufrufe zu finden und zu isolieren.

Wofür ist dieser Prompt gedacht?

Lege für jede Route deines Next.js-Projekts die Rendering- und Caching-Strategie fest (statisch, ISR, dynamisch, Streaming, Client) mit begründeter Tabelle, Beispielcode und Prüfweg.

Mit welchen KI-Tools funktioniert er?

Er ist für ChatGPT, Claude, Gemini und Microsoft Copilot entwickelt. Wir haben ihn in diesen Tools noch nicht überprüft, daher können die Ergebnisse variieren.

Wie passe ich den Prompt an?

Klicken Sie auf „Anpassen“ und füllen Sie die Variablen aus (Projekt, Routen und Datenaktualität, Hosting und Next.js-Version). Der Text wird sofort aktualisiert und lässt sich anschließend mit einem Klick kopieren. Die Werte werden nur in Ihrem Browser gespeichert.

Brauche ich Erfahrung, um ihn zu verwenden?

Er ist für Experten: Er richtet sich an Personen mit Erfahrung im Thema, die das Ergebnis beurteilen und anpassen können.

Ist dieser Prompt kostenlos?

Ja. Jeder Prompt von HomeCasa Prompts ist kostenlos, ohne Anmeldung und ohne Abonnement. Sie können ihn auch in beruflichen Projekten verwenden.

Kann ich der KI-Ausgabe vertrauen?

Betrachten Sie sie als hochwertigen Entwurf: Prüfen Sie Daten, Zahlen und wichtige Aussagen immer, bevor Sie etwas veröffentlichen oder Entscheidungen treffen.

Ähnliche Prompts