Wie erstelle ich eine isomorphe Anwendung mit Reactjs?

Eine isomorphe Anwendung (oder universale Anwendung/ serverseitiges Rendering, SSR) ist eine Web-Anwendung, die sowohl auf dem Server als auch im Browser ausgeführt werden kann. In ReactJS können Sie dies mit verschiedenen Ansätzen wie Next.js, After.js, oder einfach mit der React-DOM renderToString()-Methode realisieren.

Eine einfache Anwendung mit serverseitigem Rendering mittels Express und React-DOM könnte folgendermaßen aussehen:

1. Installieren Sie die benötigten Pakete:
```bash
npm install —save express react react-dom react-router-dom
```

2. Ein einfaches Beispiel für eine servergerenderte React-Komponente:
```js
// server.js
const express = require(‘express’);
const React = require(‘react’);
const ReactDOMServer = require(‘react-dom/server’);
const { StaticRouter } = require(‘react-router-dom’);

const App = require(‘./App’);

const app = express();

app.use(express.static(‘public’));

app.get(‘/*’, (req, res) => { const context = {};

const app = ReactDOMServer.renderToString( ); const html = ` Isomorphic React App

${app}

`; res.send(html); });

app.listen(3000, () => { console.log(‘Server is listening on port 3000’);
});
```

In diesem Beispiel wird ein Express-Server erstellt, der beim Empfang einer Anforderung diese zunächst als statischen Inhalt behandelt.

Wenn dies jedoch nicht der Fall ist, wird die URL an eine React-App weitergeleitet, die dann serverseitig gerendert wird. Anschließend wird das gerenderte Markup in eine HTML-Vorlage eingefügt und an den Client gesendet.

Bitte beachten Sie, dass für die Entwicklung einer voll funktionsfähigen isomorphen React-Anwendung noch weitere Schritte und Rücksichtnahmen erforderlich sind. Beispielsweise müssten Sie Babel und Webpack zu Ihrem Projekt hinzufügen, um JSX und ES6 Code in für den NodeJS-Server lesbaren JavaScript-Code zu übersetzen. Es gibt aber auch Frameworks wie Next.js, die das process des serverseitigen Renderings erheblich vereinfachen.