Het maken van een universele applicatie met Reactjs, ook wel bekend als Isomorphic of Universal Web App, houdt in dat je code zowel op de server als op de client kan draaien. Het doel hiervan is om de prestaties van jouw applicatie te verbeteren en een betere gebruikerservaring te bieden. Hier zijn de stappen die je moet volgen om een universele applicatie met Reactjs te maken:
1. Installatie: Eerst moet je Nodejs en npm (Node Package Manager) op jouw systeem installeren als je dat nog niet hebt gedaan.
1. Maak een nieuw project: Maak een nieuw project met behulp van het commando `create-react-app`.
1. Server-side Rendering:
De belangrijkste functie van een universele react-applicatie is server-side rendering (SSR).
- Begin met het installeren van de `express` server via `npm install express`.
- Je moet een nieuwe express-server creëren en configureren om jouw React-componenten te kunnen renderen.
1. Installeer Extra Dependencies:
Voor server-side rendering, moet je de volgende extra afhankelijkheden installeren:
- `npm install babel/register babel/preset-env babel/preset-react ignore-styles`
- `ignore-styles` is nodig omdat Node.js geen css/jpg/png bestanden kan interpreteren.
- `babel/register` wordt gebruikt om de recente versie van JavaScript (ES6) te compileren.
- `@babel/preset-env` helpt Node.js de recente versie van JavaScript te begrijpen.
- `@babel/preset-react` stelt ons in staat om JSX te schrijven.
1. Nieuw Serverbestand: Maak een nieuw serverbestand zoals `server.js` en schrijf de code voor de express-server.
1. Nieuwe Scripts Toevoegen: Na het aanmaken en instellen van het serverbestand, moet je een aantal scripts aan jouw `package.json` bestand toevoegen.
1. Voor de ontwikkelingsmodus, voeg het volgende script toe aan jouw `package.json` in het scripts object:
```
“dev”: “nodemon —exec babel-node src/server.js“
```
1. Voor de productiemodus, voeg de volgende scripts toe aan jouw `package.json`:
```
“build”: “npm run build:server && npm run build:client”,
“build:server”: “babel src -d dist”,
“build:client”: “react-scripts build”,
“start”: “node dist/server.js“
```
1. Test de applicatie:
Je kunt nu de applicatie testen door jouw localhost-server te runnen met `npm run dev` in ontwikkelingsmodus of door `npm run build` en dan `npm start` in productiemodus.
Als je deze stappen volgt, zul je een grotere universele applicatie kunnen maken met een meer complexe structuur. Maar, uiteindelijk komt het erop neer dat SSR wordt gebruikt om de initiële pagina-load te verbeteren, terwijl de client-side rendering wordt gebruikt voor de interactieve delen van de applicatie.
