Next.js App Router: Rendering der nächsten Evolutionsstufe
von Mirco Strässle
Frontend-Rendering hat in den letzten Jahren mehrere Evolutionsstufen durchlaufen. Hier schauen wir zurück auf die Reise von den ersten interaktiven Web-Anwendungen mit Client Side Rendering (CSR) bis zur neuesten Entwicklung mit dem Next.js App Router.
Warum das wichtig ist? Ganz einfach: Die richtige Strategie ist entscheidend, um eine Anwendung zu entwickeln, die sowohl schnell als auch benutzerfreundlich ist.
Von CSR über SSR zu SSG: Die Grundlagen
Erste moderne Web-Anwendungen mit hoher Interaktivität setzten auf Client Side Rendering (CSR). Der Server sendete eine leere HTML-Seite und Javascript baute den Inhalt direkt im Browser zusammen. Das brachte zwar dynamische Web-Anwendungen einen grossen Schritt voran, aber es führte unter Umständen zu langen Ladezeiten und war problematisch für die Suchmaschinenoptimierung (SEO), da Google mit leeren HTML-Seiten wenig anfangen konnte.
Auftritt Server Side Rendering (SSR). Dabei generiert der Server bei jeder Anfrage das komplette HTML. Das bedeutet, dass die Seite bereits fertig im Browser ankommt, was für kurze Ladezeit sorgt und auch für SEO vorteilhaft ist. Allerdings belastet die ständige Neugenerierung den Server, besonders bei hoher Nutzeranzahl.
Einen weiteren Ansatz brachte die Static Site Generation (SSG), bei der das HTML bereits zur Build-Zeit erstellt wird – also bevor jemand die Seite aufruft. Dadurch sind die Ladezeiten extrem kurz, da vorgefertigte Seiten ausgeliefert werden. Der Nachteil ist, dass Änderungen des Inhalts eine erneute Build-Phase notwendig machen. Incremental Static Regeneration (ISR) hat diese Schwäche behoben, indem nur bestimmte Seiten bei Bedarf neu generiert werden – eine clevere Lösung.
Die Frameworks, deine Rendering-Buddies
Die Rendering-Strategien sind also keine Hexerei, aber die Umsetzung ist nicht trivial. Deshalb sind wir auf Frameworks angewiesen. Prägend für die Strategien waren in den letzten Jahren unter anderem:
- AngularJS (2010) trug das Konzept der Single Page Applications (SPA) in den Mainstream, bei dem die gesamte Anwendung im Client (Browser) gerendert wird. Das ermöglichte Anwendungen mit hoher Interaktivität.
- Gatsby.js (2015): Mit einem ausgeklügelten Build-System brachte Gatsby die Idee von statisch generierten Seiten in die breite Javascript-Welt – im Fokus waren Content-basierte Seiten wie z.B. Blogs, die von viel kürzeren Ladezeiten profitierten.
- Next.js (2016) ermöglichte es Entwickler*innen, React-Anwendungen auf einfache Weise sowohl serverseitig als auch clientseitig zu rendern, und machte so SSR populär.
Next.js hat sich in der Folge besonders dadurch hervorgetan, dass es die verschiedenen Rendering-Strategien – CSR, SSR und SSG – in einem einzigen Framework vereint und mit ISR noch weiterentwickelt hat.
Next up: Rendering auf Komponentenebene mit dem Next.js App Router
Mit der neuen App-Router-Architektur hat Next.js eine neue Evolutionsstufe eingeläutet. Jetzt können wir pro Komponente entscheiden, welche die passende Strategie ist – das bringt eine völlig neue Flexibilität. Doch was heisst das konkret?
Früher mussten wir uns entscheiden, ob eine ganze Seite clientseitig, serverseitig oder statisch gerendert wird. Das führte oft zu Kompromissen: CSR war optimal für interaktive Inhalte, SSR für SEO und SSG für eine schnelle Ladezeit. Mit dem App Router können wir nun die beste Rendering-Methode für jede einzelne Komponente wählen. Da schlagen Entwickler*innen vor Freude glatt einen Purzelbaum.
Stell dir eine Seite mit einem dynamischen Chat-Modul und einer statischen Infobox vor. Der Chat benötigt CSR, um interaktiv und reaktionsschnell zu sein. Die Infobox hingegen wird statisch gerendert, damit sie sofort verfügbar ist, wenn Nutzer*innen die Seite aufrufen. Das Beste daran? Beide Ansätze können kombiniert werden, um eine optimale User Experience zu bieten.
Das bedeutet, dass jeder Bereich deiner Anwendung auf die bestmögliche Weise bereitgestellt wird, ohne dass Kompromisse erforderlich sind. Die Performance wird verbessert, die Flexibilität bleibt erhalten, und deine Nutzerschaft profitiert von einer reibungslosen Erfahrung.
Fazit: komplexer, aber lohnenswert
SSR und SSG und CSR mit App Router? Klingt erst einmal komplexer als frühere Ansätze. Dem gegenüber steht jedoch die grössere Flexibilität. Denn moderne Web-Applikationen müssen höheren Ansprüchen gerecht werden.
Stell dir vor, du bist Chefkoch und hast für jede Zutat das perfekte Werkzeug. Das Ergebnis? Eine perfekt angerichtete Anwendung, die blitzschnell lädt, SEO-optimiert ist und deine Gäste begeistert. Die zusätzliche Komplexität ermöglicht es uns, den grösstmöglichen Nutzen aus den jeweiligen Rendering-Strategien zu ziehen.
Hast du noch Fragen dazu oder möchtest du diese Ansätze in deiner nächsten Anwendung ausprobieren? Wir unterstützen dich gerne dabei!
Teaser zu relevanten Inhalten
Migipedia
Die Evolution der Community durch Nutzereinfluss und KI
Spühl360
In drei Klicks zu deinem Ersatzteil
Digitale Strategie
Wir helfen, Unternehmen mit digitalen Produkten, schneller ans Ziel zu kommen, indem wir eine innovative und nachhaltige digitale Strategie mit messbaren Zielen ausarbeiten.