{"id":54958,"date":"2024-08-28T07:00:00","date_gmt":"2024-08-28T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54958"},"modified":"2025-01-07T06:06:19","modified_gmt":"2025-01-07T14:06:19","slug":"react-server-komponenten","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/react-server-komponenten\/","title":{"rendered":"React Serverkomponenten: Die Zukunft der React-Entwicklung"},"content":{"rendered":"

React ist seit den letzten zehn Jahren<\/a> eine treibende Kraft beim Erstellen von Web-Apps.<\/p>\n

Wir haben alle gesehen, wie es sich von diesen klobigen Klassenkomponenten zur Eleganz der Hooks entwickelt hat.<\/p>\n

Aber React Server Components (RSCs)?<\/p>\n

Wir denken nicht, dass jemand mit einer so dramatischen Ver\u00e4nderung in der Funktionsweise von React gerechnet hat.<\/p>\n

Was sind also React Server-Komponenten? Wie funktionieren sie? Und was machen sie anders, das React nicht bereits konnte?<\/p>\n

Um all diese Fragen zu beantworten, werden wir schnell die Grundlagen durchgehen. Wenn Sie eine Auffrischung ben\u00f6tigen, werfen Sie einen schnellen Blick auf diesen Leitfaden, wie man als Anf\u00e4nger React lernt<\/a>.<\/p>\n

In diesem Beitrag erkl\u00e4ren wir Ihnen, warum wir React Server Components ben\u00f6tigt haben, wie sie funktionieren und einige der wichtigsten Vorteile von RSCs.<\/p>\n

Lassen Sie uns beginnen!<\/p>\n

Was sind React Server-Komponenten?<\/h2>\n
\"Baumdiagramm<\/figure>\n

Betrachten Sie React Server Components als eine neue Art, React-Anwendungen zu erstellen. Anstatt im Browser wie typische React-Komponenten zu laufen, werden RSCs direkt auf Ihrem Server ausgef\u00fchrt.<\/p>\n

\u201eIch denke, RSCs sind dazu gedacht, die \u201eKomponentisierung\u201c des Backends zu sein, also das \u00c4quivalent zum Backend von dem, was SPA React<\/a> f\u00fcr das Frontend getan hat. Theoretisch k\u00f6nnten sie weitgehend die Notwendigkeit f\u00fcr Dinge wie REST und GraphQL eliminieren, was zu einer viel engeren Integration zwischen Server und Client f\u00fchren w\u00fcrde, da eine Komponente den gesamten Stack durchlaufen k\u00f6nnte.\u201c \u2014 ExternalBison54 auf Reddit<\/a><\/p><\/blockquote>\n

Da RSCs direkt auf dem Server ausgef\u00fchrt werden, k\u00f6nnen sie effizient auf Backend-Ressourcen wie Datenbanken und APIs<\/a> ohne eine zus\u00e4tzliche Datenerfassungsschicht zugreifen.<\/p>\n\n\n\n

\n\t\n\t\t<\/svg>\n\t\t<\/span>\n\t\t<\/svg>\n\t<\/a>\n

API<\/h3>\n

Eine Anwendungsschnittstelle (API) ist eine Reihe von Funktionen, die es Anwendungen erm\u00f6glichen, auf Daten zuzugreifen und mit externen Komponenten zu interagieren, und dient als Bote zwischen Client und Server.<\/p>\n \n Mehr erfahren <\/a>\n\n<\/div>\n\n

Aber warum brauchten wir \u00fcberhaupt RSCs?<\/strong><\/p>\n

Um diese Frage zu beantworten, lassen Sie uns ein wenig zur\u00fcckspulen.<\/p>\n

Traditionelles React: Clientseitiges Rendering (CSR)<\/h2>\n

React war schon immer eine clientseitige UI-Bibliothek.<\/p>\n

Die grundlegende Idee hinter React besteht darin, Ihr gesamtes Design in kleinere, unabh\u00e4ngige Einheiten zu unterteilen, die wir Komponenten nennen. Diese Komponenten k\u00f6nnen ihre eigenen privaten Daten (Zustand<\/strong>) verwalten und Daten aneinander weitergeben (Eigenschaften<\/strong>).<\/p>\n

Betrachten Sie diese Komponenten als JavaScript-Funktionen<\/a>, die heruntergeladen und direkt im Browser des Benutzers ausgef\u00fchrt werden. Wenn jemand Ihre App besucht, l\u00e4dt dessen Browser den gesamten Komponentencode herunter, und React tritt in Aktion, um alles zu rendern:<\/p>\n

\"Flussdiagramm:<\/figure>\n