Serverseitiges Rendering (SSR), oder server-side rendering, bedeutet, dass Ihre Webseite am Server ge-Serviced, oder “gerendert” wird, vor Sie im Webbrowser des Benutzers angezeigt wird. Dieser Ansatz kann zu schnelleren Seitenladezeiten führen und ist unter SEO-Sichten (Suchmaschinenoptimierung) oft günstiger, da Suchmaschinen Webseiten-Inhalt bereits ab dem ersten Laden der Seite sehen können.

In diesem beispielhaftem Leitfaden zeigen wir Ihnen, wie Sie eine einfache SSR-Anwendung mit React.js erstellen. Wir nehmen an, dass Sie bereits Erfahrung mit JavaScript, React.js und Node.js haben.

1. Installieren von Noden Um React SSR zu verwenden, müssen Sie Node auf Ihrem Computer installieren. Sie können Node von der offiziellen Webseite herunterladen (https://nodejs.org/en/).

2. Erstellen Sie ein neues Projekt: – Installieren Sie “express” und “react-dom/server” mit npm (Node Package Manager): ``` mkdir react-ssr-app && cd react-ssr-app npm init -y npm install —save react react-dom express react-dom-server ```

3. Erstellen eines Servers: – Erstellen Sie eine neue Datei server.js im Hauptverzeichnis des Projekts und fügen Sie den folgenden Code ein: ``` const express = require(‘express’); const app = express(); app.listen(3000, () => console.log(‘Server is running…’)); ```

4. Komponente erstellen: – Erstellen Sie eine neue Datei “App.js” und fügen Sie eine einfache React-Komponente ein: ``` import React from “react“ const App = () => (

Hello World from React SSR!

); export default App; ```

5. Rendering des React-Elements auf dem Server: – Importieren Sie die renderToString Methode von react-dom/server in Ihrer server.js Datei und denken Sie daran, auch die React-Komponente zu importieren. Dann senden Sie das gerenderte Element zurück: ``` const express = require(‘express’); const React = require(‘react’); const renderToString = require(‘react-dom/server’).renderToString; const App = require(‘./App’); const server = express();

server.get(‘/’, (req, res) => { const AppComponent = (

); res.send(` <span class="caps">SSR</span> with React

${renderToString(AppComponent)}

`); }); server.listen(3000, () => console.log(‘Server is running…’)); ```

Jetzt ist Ihre erste serverseitig gerenderte React-Anwendung fertig! Sie können mehr weitermachen, indem Sie die http://localhost:3000 besuchen und die Konsole des Browsers öffnen. Sie sollten “Server is running…” sehen. Natürlich ist dies nur das grundlegendste Beispiel. Wenn Sie eine echte SSR-Anwendung entwickeln möchten, sollten Sie weitere Themen wie Routing, Datenfetching und Code-Splitting betrachten.

Wie erstelle ich eine SSR-Anwendung mit Reactjs?

Hello World from React SSR!