React SSR mit Node.js und Vite

Schritt-für-Schritt-Anleitung: React SSR mit Node.js und Vite

In diesem Leitfaden erfährst du, wie du Server-Side Rendering (SSR) für eine React-Anwendung mit Node.js und Vite mit minimalem, modernem Setup implementierst.

1. Projektstruktur

Das Projekt verwendet eine einfache, saubere Struktur:

ssr-react-node-vite/
├── src/            ← React-Komponenten und Hydration-Dateien
├── server.js       ← Express-Server mit Vite SSR Middleware
├── package.json
└── vite.config.js

2. Repository klonen und Voraussetzungen installieren

Stelle sicher, dass Node.js und npm installiert sind, und führe dann aus:

git clone https://github.com/jenylion/ssr-react-node-tutorial.git
cd ssr-react-node-vite

3. Abhängigkeiten installieren

npm install

Dies installiert React, ReactDOM, Vite, Express und alle erforderlichen Entwicklungswerkzeuge.

4. SSR-Server starten

Starte den Server mit:

npm run serve

Öffne dann http://localhost:3000, um deine SSR React App anzusehen.

5. Funktionsweise

Der Express-Server nutzt Vite im SSR Middleware-Modus, um Anfragen zu behandeln und deine React App auf dem Server mittels ReactDOMServer.renderToString zu rendern. Der Client hydratisiert anschließend das HTML, wodurch Interaktivität ohne Verlust der SSR-Vorteile ermöglicht wird.

6. Beispiel Entry Point (src/entry-server.jsx)

Dieser Entry Point exportiert eine render-Funktion für den Server:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App.jsx';

export function render() {
  return ReactDOMServer.renderToString(<App />);
}

7. Beispielserver (server.js)

Der Server lädt die render-Funktion dynamisch mit Vites ssrLoadModule:

const { render } = await vite.ssrLoadModule('/src/entry-server.jsx');
const appHtml = render();

Zusammenfassung

Dieses Setup ermöglicht es, React-Komponenten mit Node.js und Vite serverseitig zu rendern, wodurch SEO, Performance und Ladezeiten verbessert werden, während gleichzeitig ein modernes Entwicklererlebnis mit Vite Fast Refresh und JSX-Unterstützung beibehalten wird.

  Auf GitHub ansehen

Beispielprojekt herunterladen

Klonen, installieren und lokal ausprobieren, um SSR mit React und Node.js praxisnah zu verstehen.