mubaidr / prerender-plugin

A Node.js/ webpack plugin to prerender static HTML in a single-page application.

prerender-plugin

Node.js/webpack module/plugin to prerender static HTML in a single-page application.

What is Prerendering?

Prerendering is a process to preload all elements on the page in preparation for a web crawler to see it. If you’re using a Single Page Application (SPA) for a site that’s not behind a login and SEO is an important concern then this plugin could help you easily generate pre-rendered version of your application.

Installation

npm install prerender-plugin

Usage

This package can be used either directly with Node.js or with webpack build process.

Node.js

var PrerenderPlugin = require('prerender-plugin')
new PrerenderPlugin(options).apply()

Webpack

// webpack.config.js or webpack.prod.conf.js
var PrerenderPlugin = require('prerender-plugin')

module.exports = {
  // ...
  plugins: [
    // ...
    new PrerenderPlugin(options)
  ]
}

Options

Option	Type	Required	Default	Description
source	String	Yes		Path of the web application.
target	String		source	Path to save generated content.
routes	Array of Strings		['/']	Routes which will be pre-rendered.
capture.delay	Integer		1000ms	Time to wait before page capture.
capture.event	String			Custom event for page capture.
capture.selector	String			Wait until selected selector is available in the page before page capture.
postProcess	Function (content, route)			A function to process the generated HTML content. This function must return the final processed content. Content & route are the only parameters for this function

Notes:

• If two or more capture optons are provided, page capture will occur on the earliest of the provided options.
• If capture.event or capture.selector option is being used then capture.delay will act as timeout (default 10s).

Examples

Plese check the examples folder in the root directory for both Node.js and Webpack usage.

Development of this plugin is inspired by prerender-spa-plugin

prerender-plugin's Issues

edge cases

• you can use await page.goto(pageUrl, { waitUntil: "networkidle0" }); to catch page content after all activity finished
• you also need to make sure state of the form elements saved stereobooster/react-snap#84
• CSS-in-JS solutions work stereobooster/react-snap#76
• remove blob: URLs from HTML, because they don't make sense in generated HTML

Do you support vue hash router

Implement options for the script

• input/output directory
  - [ ] timeout for page load
• optimize page loading
• routes to pre-render
• option to post-process output
• Capture page after:
  • delay
  • custom event
  • on element existence

Resources (css, js) not available in final prerendered output

Resources should be included in pre-rendered output if the target path is different than source.

Add optional optimizations

Study and add following options (if beneficial):

• html minification
• add prefetchlinks

Add examples

• Node.js
• Webpack

Package won't build

Thanks for working on revamping the prerender-spa-plugin!

Receiving the following error when I only require prerender-plugin in my webpack file:

async function process (compilation, done) {
      ^^^^^^^^
SyntaxError: Unexpected token function

Webpack plugin

• Convert script to web-pack plugin format
• Add options for webpack plugin
• Publish script to npm

Implement minification of resource

Webpack 4 support

add examples for all options

It'd be great to have examples for all available options to see how they work. (Currently trying out the webpack plugin)

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

[Feature] Option for `delay` to take precedence over `event` to trigger prerendering

Thanks for the plugin! Working much smoother than prerender-spa-plugin so far.

Some of my pages don't trigger the capture event intentionally and would be great if the delay could take precedence over this. From experience and peeking at your code it looks like if the capture event is set then the delay will never trigger a prerender. Is this true?

If so, is this something you think this plugin would be interested in using?

Add tests

Add option to use custom index.html file