Clientseitiges vs. serverseitiges Rendern in React

1. Clientseitiges Rendern in React
2. Serverseitiges Rendern in React
3. Clientseitiges vs. serverseitiges Rendern in React

Traditionell wurden Webseiten auf dem Server gerendert, aber mit dem Aufkommen von JavaScript-basierten Frameworks wie React hat das clientseitige Rendering an Dynamik gewonnen. Heutzutage können Webanwendungen auf dem Server, im Browser (clientseitig) gerendert oder eine Kombination aus beidem verwendet werden.

Clientseitiges Rendern in React

Das React-Framework wird hauptsächlich zum Erstellen von Anwendungen verwendet, die auf der Clientseite gerendert werden. Die meisten Tutorials, die Sie online sehen, beschreiben den Prozess zum Erstellen von Single-Page-Anwendungen.

Tutorials in React docs folgen diesem Muster, ebenso wie create-react-app, ein einfaches Paket, mit dem Sie schnell mit dem Erstellen von React-Anwendungen beginnen können.

Clientseitig gerenderte React-Anwendungen sind vom Server entkoppelt. Der Server rendert nur den anfänglichen HTML-Code, der im Wesentlichen eine leere Seite ist.

Dann rendert React interaktive Elemente auf der Client-Seite, um die Seite mit Inhalten, Bildern und allem anderen, was die Seite ausmacht, zu füllen. Zum Beispiel verwendet Netflix React stark, um interaktive Elemente auf der Client-Seite zu rendern.

Serverseitiges Rendern in React

Sie können React verwenden, um die gesamte Seite (einschließlich Texten, Bildern und Inhalten) auf dem Server zu rendern. Wenn der Benutzer eine Website besucht, lädt der Server die gesamte HTML-Seite, die mit all ihrem Inhalt gefüllt ist.

Dieser Ansatz ermöglicht es Webcrawlern wie Google-Bots, die Seite mit all ihren Inhalten zu indizieren.

Wenn die Seite jedoch serverseitig vollständig gerendert wird, kann sie keine Interaktivitätsfunktionen enthalten. Wenn beispielsweise die Facebook-Startseite nur auf dem Server gerendert würde, könnten Benutzer keine neuen Benachrichtigungen sehen, ohne die Seite zu aktualisieren.

Clientseitiges vs. serverseitiges Rendern in React

Die meisten Websites wie Facebook und Netflix verwenden eine Kombination aus beidem, um das Beste aus beiden Welten herauszuholen. Wenn Sie zum Beispiel möchten, dass Ihre Website von Google indexiert wird und Suchmaschinen-Traffic generiert, sollten Sie Ihren gesamten Textinhalt serverseitig rendern.

Clientseitige Anwendungen mögen für die Besucher gut aussehen, aber Bots sehen nur eine leere HTML-Seite.

Bei der Kombination von CSR (clientseitiges Rendering) und SSR (serverseitiges Rendering) rendert der Server eine HTML-Datei mit dem minimal notwendigen Inhalt. Sobald die Skripts geladen sind, können Sie den clientseitigen Rendering-Ansatz verwenden, um interaktive Features anzuzeigen.