Nextjs App Router

Der App Router ist ein neues Feature in Next.js 13, das auf den React Server Components basiert. Er unterstützt gemeinsame Layouts, verschachteltes Routing, Ladezustände, Fehlerbehandlung und mehr. Der App Router läuft in einem neuen Verzeichnis namens `app`, welches neben dem `pages` Verzeichnis läuft, um eine schrittweise Einführung zu ermöglichen. Es ist wichtig zu wissen, dass der App Router Vorrang vor dem Pages Router hat.

Die drei wichtigsten Neuerungen des App Routers in Next.js 13 sind

• Unterstützung für Shared Layouts: Mit dem App Router kann man ein gemeinsames Layout für mehrere Seiten erstellen. Dies ist besonders nützlich, wenn eine Navigationsleiste, einen Footer oder andere wiederkehrende Elemente auf mehreren Seiten benötigt werden.
• Verschachteltes Routing: Der App Router unterstützt verschachteltes Routing. Das bedeutet, dass Sie Routen innerhalb von Routen erstellen können, was die Organisation der Anwendung vereinfacht.
• Ladezustände und Fehlerbehandlung: Der App Router bietet eingebaute Unterstützung für Ladezustände und Fehlerbehandlung. Dadurch können benutzerfreundliche Ladebildschirme und Fehlerseiten entstehen.

React Server Komponenten

• Flexibleres getServerSideProps: fetch mit async und await auch in importierten Komponenten verwenden.
• Weniger JavaScript herunterladen und ausführen: Nur das JS für Komponenten mit der “use client”-Deklaration wird an den Client gesendet.
• CSS-in-JS nicht möglich: Derzeit sind CSS-in-JS-Lösungen, die eine Laufzeit erfordern, in RSC nicht möglich.

Es ist wichtig zu beachten, dass RSCs nicht dazu gedacht sind, Client-Komponenten zu ersetzen.

Konfiguration des Cache-Verhaltens

Next.js erweitert die native Web fetch() API, um es jeder Anfrage auf dem Server zu ermöglichen, ihre eigenen persistenten Cache-Semantiken zu definieren. Durch Konfiguration kann der Cache für serverseitige fetch-Requests pro Anfrage, pro Seite oder applikationsweit definiert werden.

Fazit

Der App Router ist eine spannende Neuentwicklung mit mächtigen Möglichkeiten. Es ist aber auch so, dass der App Router teilweise grössere mentale Anpassungen bei den Entwickler:innen erfordert.