poi-preset-prerender-spa

poi preset to add prerendering to the build

Usage no npm install needed!

<script type="module">
  import poiPresetPrerenderSpa from 'https://cdn.skypack.dev/poi-preset-prerender-spa';
</script>

README

poi-preset-prerender-spa

Use prerender-spa-plugin to prerender in your build step

NB: This plugin uses the version 3 of prerender-spa-plugin which is still in beta

Install

yarn add poi-preset-prerender-spa --dev

Usage

This preset will add PrerenderSpaPlugin with prerender-spa-plugin for you

// poi.config.js
module.exports = {
  presets: [require('poi-preset-prerender-spa')()]
}

Then it will prerender the html when you run poi build.

PrerenderSpaPlugin(spaOptions, puppeteerOptions)

It accepts two values the first of which is the options forprerender-spa-plugin:

require('poi-preset-prerender-spa')({
  staticDir: path.join(__dirname, 'dist'),
  outputDir: path.join(__dirname, 'prerendered'),
  routes: ['/', '/about', '/some/deep/nested/route']
})

The second is for configuring the default added PuppeteerRenderer (@prerenderer/renderer-puppeteer) shown on prerender-spa-plugin:

require('poi-preset-prerender-spa')(
  {},
  {
    renderAfterDocumentEvent: 'render-event'
  }
)

if no puppeteerOptions are set it defaults to {renderAfterTime:500} if you have issues with it not getting the page after the js import set the puppeteerOptions to {renderAfterDocumentEvent: 'render-event'} and add a document.dispatchEvent(new Event('render-event')) to fire when the javascript has populated

Known Issues

  • Isn't set up to work with the poi config option homepage. Likely solution is to setup poi.dist to be of the sort dist/homepage, set the spaOptions.staticDir to be path.join(__dirname,'dist') and set the spaOptions.routes to be ['/homepage']

License

MIT © darcnite3000