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