At Reuters Graphics we are all about JAM stack. Avoiding the overhead of server maintenance keeps us lean, minimizes our technical debt and protects our ability to scale with our audience. But being serverless sometimes makes it more complex to use the tools we like to their best effect.
For example, we like to use modern frameworks like React, but rendering our content only in the client makes our pages slower for our readers and less SEO friendly.
This plugin lets us reap the benefits of server-side rendering in those frameworks but in the context of a static page. With it, we can pre-render our content at build time and, in the client, still hydrate a dynamic app.
$ yarn add -D html-webpack-prerender-plugin html-webpack-plugin@next
- Configure webpack.
// webpack.config.jsconst HtmlWebpackPlugin = ;const HtmlWebpackPrerenderPlugin = ;moduleexports =entry: './src/js/index.js'output:path: './dist'filename: '[name].js'// This is important, because your app must// be executable in both a node AND browser// environment.libraryTarget: 'umd'// ...plugins:template: './src/templates/index.html'main: '#root';
- Create a template with a root container for your app.
<!-- src/templates/index.html -->
- Make sure your app exports a default function that renders a string of markup.
// src/js/index.js= '<p>Hello world!</p>';
<!-- src/templates/index.html -->Hello world!
Read the complete guide to the plugin configuration options.
Check out some example configurations:
- Multiple apps
- Static markup
- React app
- React/Redux app with preloaded state
- Usage with react-helmet-async
- Async rendering
$ yarn build && yarn test