In diesem Artikel zeige ich, wie du das Beste aus beiden Welten kombinieren kannst. Ich integriere hierbei ein Client-seitiges Zustandsverwaltungstool in ein Server-seitiges Rendering-Modell. Mein Ziel ist es, die Vorteile von Single Page Applications (SPAs) und Server-seitigem Rendering (SSR) zu kombinieren. Ich möchte die schnelle und flexible Natur von SPAs mit den SEO-freundlichen Vorteilen von SSR verbinden.
Verständnis von Server-seitigem Rendering (SSR) mit Next.js
SSR ist eine der Techniken, welche bei der Entwicklung von Webanwendungen eingesetzt werden. Ziel ist es, eine Dokumentendatei auf dem Server zu erstellen und diese mit Daten zu füllen. Das bedeutet, dass Benutzer*innen beim Laden der Website bereits einen ansprechenden Inhalt vorfinden. Im Hintergrund werden inzwischen Javascript-Dateien vom Server geladen. Diese werden für die clientseitigen Interaktionen benötigt.
Wenn man bereits mit React vertraut ist und die gleiche Syntax für SSR verwenden möchte, ist Next.js das richtige Framework.
In diesem Artikel stütze ich mich auf eine einfache Demo-Anwendung (Buchhandlung), um Techniken der Zustandsverwaltung zu demonstrieren. In dieser Buchlisten-Anwendung holt Next.js die Buchdaten vom Server mit einer Funktion wie getBooks(). Die Daten werden an BookList weitergeleitet, um sicherzustellen, dass die Bücherliste im HTML-Dokument des Browsers angezeigt wird.
export default async function Home() {
// Bücher zunächst vom Server laden. Dies bewahrt die Vorteile von SSR.
const books = await getBooks();
return (
<main className="container mx-auto py-8 px-4">
<StoreProvider>
<BookList books={books} />
</StoreProvider>
</main>
);
}Die Magie der Client-seitigen Hydratation
Nachdem deine Seite erstellt wurde, fängt Next.js an, Client-seitiges JavaScript einzufügen. Dieser Trick wird “Hydratation“ (engl.: Hydration) genannt und bringt zusätzliche Funktionalität auf deine Seite.
Dieser Schritt gibt der Seite eine Seele. Er fügt Event-Listener für Interaktivität hinzu. Außerdem ermöglicht er Client-seitigem JavaScript, bei Updates oder Rendering zu helfen.
Der Inhalt auf deiner Seite wirkt lebendig und interagiert sofort mit den Benutzern. Du musst nicht warten, bis die Seite neu geladen wird.
Das Zusammenspiel zwischen Serverseite und Client-Komponenten ist entscheidend. Als Beispiel nehme ich die BookList-Komponente – sie erhält anfangs eine gemütliche Liste von Büchern als Props.
Danach wird sie aktiv und sendet eine Aktion, um den Redux-Speicher auf der Clientseite zu aktualisieren. Dieser kritische Schritt stellt sicher, dass der Zustand vom Server und vom Client in perfekter Harmonie sind.
export const BookList = ({ books }: { books: Book[] }) => {
const store = useStore<RootState>();
const initialized = useRef(false);
if (!initialized.current) {
// Server-seitigen Zustand mit Client-seitigen Zustand synchronisieren.
store.dispatch(addBooks(books));
initialized.current = true;
}
const clientBooks = useSelector((state: RootState) => state.books.list);
// Bücher rendern...
}SSR und Client-seitige Interaktivität mit Redux verbinden
Kann man die Vorteile der reibungslosen Benutzer*inneninteraktion von Client Side Rendering sowie die SEO-Vorteile von SSR zu nutzen? Ja, dazu müssen Next.js und Redux im Tandem verwenden werden.
Next.js übernimmt das Server-Side Rendering, lädt die ersten Seiten schnell und verbessert die SEO. Redux verwaltet den Zustand nahtlos über Server- und Client-Seiten hinweg. Dieses dynamische Duo ermöglicht sofortige Updates und Interaktionen, wie das Hinzufügen oder Bearbeiten von Elementen, ohne Seitenneuladungen. Die Daten werden nahtlos vom Server zum Client übertragen.
Die wahre Schönheit der Kombination von Next.js mit Redux liegt in der nahtlosen User Experience, die sie bietet. Die Anwendung hält Konsistenz und Reaktionsfähigkeit aufrecht. Das ist möglich, indem wichtige Daten auf dem Server vorab geladen und mit dem Client-Speicher synchronisiert werden.
Die Integration ermöglicht eine schnelle Anpassung der Benutzeroberfläche. Dadurch können Benutzer miteinander interagieren, z.B. durch das Anzeigen von Bücherlisten oder das Reagieren auf Benutzeraktionen. Dies trägt zu einer reibungslosen Benutzererfahrung bei.
Diese Mischung verbessert die Leistung und Nutzungsfreundlichkeit von Webanwendungen und macht komplexe Seiten einfach und intuitiv zu bedienen. Für ein tieferes Verständnis, wie Client- und Server-seitige Komponenten in Harmonie arbeiten, findest du weitere Informationen auf Nextjs.org.
