prerender-react-app v1.0.13
Prerender React App
You created an amazing web app with create-react-app
, but now want to serve html on initial page load? We got you covered. With this package, you can easily prerender the pages of your desire.
How it works
- We will serve the production version (build output) of your project
- A Chromium-based browser (puppeteer) will open all requested pages
- When the page has all the required content, the browser will return the HTML from the rendered page
- The rendered page will be stored under the build output, keeping in mind the routing of the project
How to use
Installation
Either
npm i --save-dev prerender-react-app
Or
yarn add -D prerender-react-app
Usage
The example below will prerender three pages:
- index
- about
- policy
const prerender = require("prerender-react-app");
(async () => {
await prerender({
pages: ["/", "/about", "/policy"],
waitForSelector: "footer",
});
})();
Configuration
Config name | Description | Default |
---|---|---|
buildPath | Path to the build folder of your project | ./build |
domain | Production domain name of your website | |
port | Port to run web service on while prerendering | 8000 |
pages | Array of routes to prerender | '/' |
plugins | Array of plugins | [] |
waitForSelector | Wait for a certain selector to be present before completing prerender |
Plugins
Create your own plugin
A plugin is basically an object with the following methods:
- before
- after
The before
method will be triggered before the page is rendered. Here you can make adjustments to the page that will be permanently changed onto the output file.
The after
method will be triggered after the output page is already created. This can be used to create new custom pages, add tracking, upload results etc etc
All methods will receive the same params:
Param | description |
---|---|
page | Puppeteer page object to control the Chromium browser |
pageUrl | Route of which page is showing |
config | Config that was passed to the main prerender method |
const plugin = {
before: async (page, pageUrl, config) => {
// Mutate the document a bit
await page.evaluate(() => {
document.querySelector("footer").innerHTML += "Prerendering is awesome!";
});
},
after: async (page, pageUrl, config) => {
// Get the html of the page
const html = await page.evaluate(
() => document.body.parentElement?.outerHTML
);
},
};
Experimental plugin: AMP
The experimental AMP plugin will autogenerate an AMP version of each page and add the necessary link tags to link both versions to each other.
It will inline all external CSS, as this is a requirement for AMP.
This plugin is experimental and assumes that all pages in your project can work without JavaScript.
import { __experimental } from "prerender-react-app/plugins";
const { amp: ampPlugin } = __experimental;
(async () => {
await prerender({
domain: 'dejakob.com',
plugins: [ampPlugin],
pages: ['/', '/about'],
waitForSelector: 'footer'
} as any);
})();