Prerender-webpack-plugin

What is Prerendering?

Pre-rendering describes the process of rendering a client-side application at build time, producing useful static HTML that can be sent to the browser instead of an empty bootstrapping page.

Pre-rendering is like Server-Side Rendering, just done at build time to produce static files. Both techniques help get meaningful content onto the user's screen faster.

How does it work?

1. After build, run a static web server using new files with express .
2. Open the web page with puppeteer, a headless browser.
3. After the browser rendering, get the html string and write it to html file.

Usage

Intall prerender-webpack-plugin as a development dependency:

npm i -D prerender-webpack-plugin

Add plugin to your webpack configuration:

const PrerenderWebpackPlugin = require('Prerender-webpack-plugin').default

...
    plugins: [
        new PrerenderWebpackPlugin()
    ]
...

or pass options

...
    plugins: [
        new PrerenderWebpackPlugin({
            ...options
        })
    ]
...

Options

All options are optional.

| Option | Type | Default | Description | |---------------|---------|---------------|-------------| | staticPath | string | / | The static path of web server, '/' means the out path of webpack config | route | string | / | The page will be open in browser, and save it to html file | template | string | index.html | HTML file to update | selector | string | #root | HTML string wrapper | replacement | string | {{prerender}} | The string will be replaced with prerender HTML | host | string | 127.0.0.1 | Host of web server | port | number | 8848 | Port of web server | duration | number | 4000 | Millseconds waiting for browser render the page | disabled | boolean | false | Determine plugin work or not