© art_of_sun/Shutterstock.com
Was sind React Server Components?

Reacts neuster Streich: Server Components


Das Jahr 2020 endete für React-Entwickler mit einem lauten Knall, als das React-Team von Facebook kurz vor Weihnachten den RFC für React Server Components vorstellte. Und auch wenn Facebook selbst davon spricht, dass React Server Components noch Zukunftsmusik sind, wollen wir uns in diesem Artikel einmal mit dem Thema auseinandersetzen. Seit der Vorstellung von Hooks könnten React Server Components die größte Neuerung für React-Entwickler werden.

Um die Frage zu beantworten, warum man eigentlich React Server Components benötigt, ist es sinnvoll, ein wenig auszuholen. Ich selbst entwickle bereits seit über 10 Jahren sogenannte Single Page Applications (SPAs). Das sind Anwendungen, bei denen der Benutzer nur einmal eine HTML-Seite aufruft und die weitere Navigation per JavaScript und nachgeladenen Daten stattfindet. Damals hieß das Ganze zwar noch nicht SPA, sondern RIA (Rich Internet Application), die Grundidee ist aber dieselbe geblieben. Diese Anwendungen haben in den letzten 10 Jahren an Popularität gewonnen. Oft wird bei neuen Webanwendungen direkt zu Angular oder React gegriffen, die ja auch viele Vorteile besitzen. Aber wie immer im Leben gehen diese Vorteile einher mit Nachteilen.

Nachteile von SPAs

Einer der Nachteile von Single Page Applications ist, dass sie oft nicht gut von Suchmaschinen indiziert werden können, da sie eben nur ein kleines HTML-Grundgerüst ohne Inhalte ausliefern und der Rest per JavaScript nachgeladen wird. Suchmaschinen wie Google arbeiten zwar daran, auch solche Seiten zu indizieren, darauf verlassen sollte man sich aber trotzdem nicht. Darüber hinaus neigen SPAs dazu, riesige Mengen an JavaScript zu laden, bevor der User anfangen kann, die Anwendung zu verwenden. Das ist zwar auch ein Problem, das sich aufgrund von immer schnelleren Internetzugängen reduziert, aber spätestens, wenn man im ICE zwischen Köln und Düsseldorf sitzt, ärgert man sich doch wieder darüber, dass sich eine ganze Zeit lang nichts tut. Aus der Kombination der beiden Probleme ergibt sich dann, dass ein User, der nun eine Minute darauf wartet, dass „die paar Megabyte JavaScript“ heruntergeladen werden, die ganze Zeit nur auf eine weiße Seite blickt. Und das will natürlich niemand den eigenen Usern zumuten. Da auch Google erkannt hat, dass User ungerne warten, fließt die Ladezeit mittlerweile auch in die Suchmaschinenplatzierung ein.

Server-side Rendering als Lösungsansatz?

Als ein Lösungsansatz für das Problem, dass Suchmaschinen SPAs nicht indizieren können und User während der Ladezeit keine weiße Seite sehen sollen, hat sich Server-side Rendering, kurz SSR, etabliert. Insbesondere in der React-Community redet man bereits seit vielen Jahren davon, dass Komponenten und ganze Anwendungen „isomorph“ seien sollen. Das ist ein Fachbegriff aus der Mathematik, der aber in diesem Kontext eigentlich nur heißt: Die Komponente bzw. Anwendung kann sowohl serverseitig als auch im Browser ausgeführt werden. Üblicherweise rendert der Server mit Hilfe von Node.js die Komponenten für die Darstellung im Browser. Das daraus resultierende HTML-Grundgerüst wird dann an den Client gesendet. Das Rendering dort sollte abgeschlossen sein, bevor das Laden des JavaScript-Codes beginnt und die SPA interaktiv wird.

Wir können also mit Server-side Rendering dafür sorgen, dass die weiße Seite nicht mehr so lange zu sehen ist und Suchmaschinen unsere Seite indizieren können. Trotzdem müssen wir den kompletten JavaScript-Code herunterladen und genaugenommen wird das Rendering, das serverseitig durchgeführt wurde, im Client noch einmal durchgeführt.

React Server Components vorgestellt

Genau hier können React Server Components ihre Stärken ausspielen. React Server Components erlauben uns, einzelne Komponenten mitsamt ihren Abhängigkeiten komplett auf den Server zu verlagern. Das bedeutet, dass sie im Browser nicht mehr ausgeführt werden, und das bedeutet, dass die Menge an JavaScript, die heruntergeladen (und ausgeführt) werden muss, schrumpft. In ersten Experimenten von Facebook in einer Produktionsumgebung führten React Server Components zu einer Einsparung von 29 Prozent bei der Bundle-Größe, also von fast einem Drittel, wie Facebook in einem Videovortrag zu React Server Components berichtet [1]. Und das ist sicher erst der Anfang.

Schauen wir uns einmal ein Beispiel an, wie das Ganze aussehen kann. Dafür gehen wir davon aus, dass wir uns in einem Projekt bewegen, das bereits React Server Component...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang