rsp
react-spa-prerender
npm i react-spa-prerender
rsp

react-spa-prerender

React library for prerendering static pages, optimize SEO and web performance

by Serhiy

1.0.14 (see all)License:MITTypeScript:Not Found
npm i react-spa-prerender
Readme

react-spa-prerender

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.

Upcoming features

  • Auto sitemap generation
  • Prebuilding pages with dynamic routes

Follow the steps below:

Install

With npm

npm install react-spa-prerender --save-dev

With yarn

yarn add react-spa-prerender --dev

Add as postbuild script

In your package.json add the following in the scripts section:

"scripts": {
    "postbuild": "react-spa-prerender",
}

Add .rsp.json file

.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

Add ReactDOM.hydrate in your index.js

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);
}

Voila!!!

That's it. After accomplishing all the steps above, run you build command and your prerendered files will be in your build directory.

.rsp.json Options

optiontypedefaultdescription
routes(Required)Array-An array of routes you want to parse and prerender into static html
portNumber3000port where prerendering server will be starting
buildDirectoryString'./build'a relative path to your build folder
engineObject{}params for Puppeteer engine, list of available params described below

Engine options:

Example of .rsp.json with engine options:

{
  "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"
  ]
}

Downloads/wk

375

GitHub Stars

17

LAST COMMIT

3mos ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

6

OPEN PRs

1
VersionTagPublished
1.0.14
latest
3mos ago
No alternatives found
No tutorials found
Add a tutorial