Workshop: Fullstack React-Anwendungen mit Next.js

React ist eine bekannte und weit verbreitete Bibliothek zur Entwicklung von Single-Page-Anwendungen (SPA), die in JavaScript/TypeScript implementiert sind und vollständig im Browser laufen. Mit der „Fullstack Architektur-Vision“ und den React Server Components (RSC) eröffnet React nun aber auch den Weg, Teile der Anwendung serverseitig auszuführen und zu rendern. Damit soll der Browser entlastet werden, da dieser weniger JavaScript-Code ausführen muss und Server-Client-Roundtrips beim Ermitteln und Speichern von Daten vermieden werden. Zur Entwicklung ganzheitlicher React-Anwendungen, die auch auf dem Server ausgeführt werden, empfiehlt das React-Team ein spezialisiertes Fullstack-Framework wie Next.js, das wir uns in diesem
Workshop ansehen.

In diesem Workshop lernst Du die Idee hinter den Fullstack-Anwendungen kennen und für welche Anwendungsfälle sie besonders geeignet sind. Anhand des Fullstack-Frameworks Next.js lernst Du konkret, wie Du deine React-Anwendung ganz oder teilweise serverseitig ausführen lassen können, worin die Unterschiede in Code und Architektur gegenüber einer klassischen React SPA liegen und welche Konsequenzen der Fullstack-Ansatz für Architektur und Betrieb Ihrer Anwendung mit sich bringt.

Nach dem Workshop kannst Du Fullstack-Anwendungen mit React und Next.js entwickeln und einschätzen, wo der Fullstack-Ansatz für deine eigenen Anwendungen sinnvoll ist.

Agenda

Warum „Fullstack“?

• Möglichkeiten und Grenzen von Single-Page-Anwendungen
• Klassisches serverseitiges rendern (SSR) mit React
• Die React „Fullstack Architektur-Vision“
• Ideen und Konzepte von React Server Components (RSC)

Fullstack-Anwendungen mit React und Next.js

• Asynchrone Server Komponenten
• Client- und Server-Komponenten
• Arbeiten mit serverseitigen Daten (REST, Datenbank)
• Pattern für die Arbeit mit RSCs
• Server Actions
• Client-seitiger State und Formulare

Next.js-spezifische Features

• Serverseitiges Routing, Seiten und Layouts
• Dynamische und statische Routen
• Rendern zur Build- und Laufzeit
• Partial Rendering
• Caching