@chiffon/prerender-webpack-plugin
Advanced tools
Prerender your index.html via JavaScript, allowing for easy customization.
npm:
npm install --save-dev @chiffon/prerender-webpack-plugin
yarn:
yarn add --dev @chiffon/prerender-webpack-plugin
In your webpack config:
const PrerenderWebpackPlugin = require('@chiffon/prerender-webpack-plugin');
module.exports = {
...
plugins: [
// instead of 'HtmlWebpackPlugin'
new PrerenderWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'src', 'index.js'),
}),
...
]
};
@chiffon/prerender-webpack-plugin will pass the output file paths like JavaScript and CSS to your function in index.js, which must return a string:
// index.js
import React from 'react'
import ReactDOM from 'react-dom/server'
import App from './App.js'
function defaultTemplate({ css, js }) {
// First we render the outside parts of html as static string (e.g. head, body)
// Next, we render the web app root as html (e.g. <App />) and
// inject this into the outside parts via dangerouslySetInnerHTML because
// we only need React to hydrate the root element.
return `<!DOCTYPE html>
${ReactDOM.renderToStaticMarkup(
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Web App</title>
{css &&
css.map(cssResourceUrl => (
<link
href={`${__webpack_public_path__}${cssResourceUrl}`}
rel="stylesheet"
/>
))}
{js &&
js.map(jsResourceUrl => (
<script
src={`${__webpack_public_path__}${jsResourceUrl}`}
nomodule
defer
/>
))}
</head>
<body>
<div
id="root"
dangerouslySetInnerHTML={{ __html: ReactDOM.renderToString(<App />) }}
/>
</body>
</html>,
)}`
}
export default defaultTemplate
Single Page Applications (SPA) like those made from create-react-app, vue-cli and similar tools require JavaScript to run before creating the components in the HTML.
Prerendering is generating the HTML during compile time (e.g. webpack build), so that users see some content before JavaScript is downloaded and parsed.
Prerendering results in better perceived performance as users see the content earlier.
There are some Search Engine Optimisations (SEO) benefits too as search engine crawlers are better with plain HTML than SPAs.
Even though your content is prerendered, user interactions like clicks and key presses may not trigger as JavaScript has not executed yet. If you have large JavaScript files, this may not be ideal.
Certain applications such as internal apps may not benefit from faster content.
FAQs
Prerender for web applications built with Preact
The npm package @chiffon/prerender-webpack-plugin receives a total of 0 weekly downloads. As such, @chiffon/prerender-webpack-plugin popularity was classified as not popular.
We found that @chiffon/prerender-webpack-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket’s new Pull Request Stories give security teams clear visibility into dependency risks and outcomes across scanned pull requests.
Research
/Security News
npm author Qix’s account was compromised, with malicious versions of popular packages like chalk-template, color-convert, and strip-ansi published.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.