Server Side Rendering (SSR) met React betekent in wezen dat we de toepassing aan de serverzijde kunnen weergeven voordat we deze naar de client sturen. Dit helpt ons om de prestaties van onze applicatie te verbeteren en maakt onze applicatie SEO-vriendelijker. Volg deze stappen om een SSR-applicatie te creëren met React.js.
Stap 1: Installeer Node en npm
Zorg ervoor dat je Node.js en npm op je apparaat hebt geïnstalleerd voordat je begint. Je kunt ze hier downloaden: https://nodejs.org/en/download/
Stap 2: Configureer je project
Creëer een nieuw project met behulp van deze commando’s. Eerst, maken van een nieuw map:
```
mkdir ssr-react-app
cd ssr-react-app
```
Dan initiëren van een nieuw Node.js project:
```
npm init -y
```
Stap 3: Installeer de benodigde pakketten
Je moet de volgende pakketten installeren:
```
npm install react react-dom express babel-core babel-loader babel-preset-react babel-preset-env webpack webpack-cli nodemon
```
Stap 4: Configureer Webpack
Maak een nieuwe `webpack.config.js` bestand.
In dit bestand zou het er ongeveer zo uit moeten zien:
```
const path = require(“path”);
module.exports = {
entry: “./src/index.js”,
output: {
filename: “bundle.js”,
path: path.resolve(__dirname, “build”)
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: “babel-loader“
}
}
]
}
};
```
Stap 5: Configureer Babel
Maak een `.babelrc` bestand.
In dit bestand zou het er ongeveer zo uit moeten zien:
```
{
“presets”: [“@babel/preset-env”, “@babel/preset-react”]
}
```
Stap 6: Schrijf de server
Maak een server in een `server.js` bestand.
Het zou ongeveer zo moeten zien:
```
import express from ‘express’;
import React from ‘react’;
import ReactDOMServer from ‘react-dom/server’;
import App from ‘./App’;
const app = express();
app.use(express.static(‘public’));
app.get(‘*’, (req, res) => {
const app = ReactDOMServer.renderToString(
app.listen(3000, () => {
console.log(‘Server is listening on port 3000’);
});
```
Stap 7: Schrijf je React App
In `src/index.js` zou het er ongeveer zo uit moeten zien:
```
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App’;
ReactDOM.hydrate(
```
In `src/App.js` zou het er ongeveer zo uit moeten zien:
```
import React from ‘react’;
const App = () => { return
export default App;
```
Stap 8: Run je server
Gebruik het volgende commando om je server uit te voeren:
```
node server.js
```
Op dit punt zou u een werkende SSR for React.js applicatie moeten hebben.
Dit is de basisconfiguratie die je helpt om SSR in React.js te implementeren. Het kan ingewikkelder worden wanneer je rekening moet houden met gegevensaanvragen, routering, authenticatie en meer.
In zo’n geval naar je overwegen om te gebruik maken van een framework zoals Next.js dat SSR in React gemakkelijker maakt.
