The easiest way to prerender static pages, optimize SEO and build high performance for your React SPA. Build production-ready code just by adding few lines of code.
Follow the steps below:
With npm
npm install react-spa-prerender --save-dev
With yarn
yarn add react-spa-prerender --dev
In your package.json add the following in the scripts section:
"scripts": {
"postbuild": "react-spa-prerender",
}
.rsp.json is the configuration file for react-spa-prerender
. Create this file in your application root folder.
The minimum configuration requires the routes you want to be parsed.
Example:
{
routes: [
"/",
"/about",
"/services"
"/blog/article1"
...
]
}
From example above: Your "/" route will transform into "index.html" page. "/about" -> "about.html" "/services" -> "services.html" "/blog/article1" -> create blog directory with file "article1.html" ("/blog/article1.html") and so on...
The rest of the .rsp.json options described below
In your index.js(main app file) change the ReactDOM.render logic:
import ReactDOM from 'react-dom';
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Into following:
import ReactDOM from 'react-dom';
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
ReactDOM.hydrate(<App />, rootElement);
} else {
ReactDOM.render(<App />, rootElement);
}
That's it. After accomplishing all the steps above, run you build command and your prerendered files will be in your build directory.
option | type | default | description |
---|---|---|---|
routes(Required) | Array | - | An array of routes you want to parse and prerender into static html |
port | Number | 3000 | port where prerendering server will be starting |
buildDirectory | String | './build' | a relative path to your build folder |
engine | Object | {} | params for Puppeteer engine, list of available params described below |
{
"port": 3000,
"buildDirectory": "./build",
"engine": {
"launchOptions": {
"args": ["--no-sandbox", "--disable-setuid-sandbox"],
"product": "chrome",
"headless": true,
"ignoreHTTPSErrors": true
},
"gotoOptions": {
"timeout": 0
}
},
"routes": [
"/",
"/about",
"/services",
"/blog/article1",
"/blog/article2"
]
}