npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@httptoolkit/prerender-loader

v1.4.0-custom-env-vars

Published

Painless universal prerendering for Webpack. Works great with html-webpack-plugin.

Downloads

16

Readme

Painless universal prerendering for Webpack. Works great with html-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.

Features

  • Works entirely within Webpack
  • Integrates with html-webpack-plugin
  • Works with webpack-dev-server / webpack serve
  • Supports both DOM and String prerendering
  • Asynchronous rendering via async/await or Promises

How does it work?

prerender-loader renders your web application within Webpack during builds, producing static HTML. When the loader is applied to an HTML file, it creates a DOM structure from that HTML, compiles the application, runs it within the DOM and serializes the result back to HTML.


Installation

First, install prerender-loader as a development dependency:

npm i -D prerender-loader

Usage

In most cases, you'll want to apply the loader to your html-webpack-plugin template option:

// webpack.config.js
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
-     template: 'index.html',
+     template: '!!prerender-loader?string!index.html',

      // any other options you'd normally set are still supported:
      compile: false,
      inject: true
    })
  ]
}

What does all that punctuation mean? Let's break the whole loader string down:

In Webpack, a module identifier beginning with !! will bypass any configured loaders from module.rules - here we're saying "don't do anything to index.html except what I've defined here

The ?string parameter tells prerender-loader to output an ES module exporting the prerendered HTML string, rather than returning the HTML directly.

Finally, everything up to the last ! in a module identifier is the inline loader definition (the transforms to apply to a given module). The filename of the module to load comes after the !.

Note: If you've already set up html-loader or raw-loader to handle .html files, you can skip both options and simply pass a template value of "prerender-loader!index.html"!

As with any loader, it is also possible to apply prerender-loader on-the-fly :

const html = require('prerender-loader?!./app.html');

... or in your Webpack configuration's module.rules section:

module.exports = {
  module: {
    rules: [
      {
        test: 'src/index.html',
        loader: 'prerender-loader?string'
      }
    ]
  }
}

Once you have prerender-loader in-place, prerendering is now turned on. During your build, the app will be executed, with any modifications it makes to index.html will be saved to disk. This is fine for the needs of many apps, but you can also take more explicit control over your prerendering: either using the DOM or by rendering to a String.

DOM Prerendering

During prerendering, your application gets compiled and run directly under NodeJS, but within a JSDOM container so that you can use the familiar browser globals like document and window.

Here's an example entry module that uses DOM prerendering:

import { render } from 'fancy-dom-library';
import App from './app';

export default () => {
  render(<App />, document.body);
};

In all cases, asynchronous functions and callbacks are supported:

import { mount } from 'other-fancy-library';
import app from './app';

export default async function prerender() {
  let res = await fetch('https://example.com');
  let data = await res.json();
  mount(app(data), document.getElementById('app'));
}

String Prerendering

It's also possible to export a function from your Webpack entry module, which gives you full control over prerendering: prerender-loader will call the function and its return value will be used as the static HTML. If the exported function returns a Promise, it will be awaited and the resolved value will be used.

import { renderToString } from 'react-dom';
import App from './app';

export default () => {
  const html = renderToString(<App />);
  // returned HTML will be injected into <body>:
  return html;
};

In addition to DOM and String prerendering, it's also possible to use a combination of the two. If an application's Webpack entry exports a prerender function that doesn't return a value, the default DOM serialization will kick in, just like in DOM prerendering. This means you can use your exported prerender function to trigger DOM manipulation ("client-side" rendering), and then just let prerender-loader handle generating the static HTML for whatever got rendered.

Here's an example that renders a Preact application and waits for DOM rendering to settle down before allowing prerender-loader to serialize the document to static HTML:

import { h, options } from 'preact';
import { renderToString } from 'preact';
import App from './app';

// we're done when there are no renders for 50ms:
const IDLE_TIMEOUT = 50;

export default () => new Promise(resolve => {
  let timer;
  // each time preact re-renders, reset our idle timer:
  options.debounceRendering = commit => {
    clearTimeout(timer);
    timer = setTimeout(resolve, IDLE_TIMEOUT);
    commit();
  };

  // render into <body> using normal client-side rendering:
  render(<App />, document.body);
});

Injecting content into the HTML

When applied to a .html file, prerender-loader will inject prerendered content at the end of <body> by default. If you want to place the content somewhere else, you can add a {{prerender}} field:

<html>
  <body>
    <div id="app_root">
      <!-- Inject any pre-rendered HTML here: -->
      {{prerender}}
    </div>
  </body>
</html>

This works well if you intend to provide a prerender function that only returns your application's HTML structure, not the full document's HTML.

Prerendering JavaScript Files

In addition to processing .html files, the loader can also directly pre-render .js scripts. The only difference is that the DOM used for prerender will be initially empty:

const prerenderedHtml = require('!prerender-loader?string!./app.js');

Options

All options are ... optional.

| Option | Type | Default | Description | | ------------- | ------- | ------------------ | ---------------------------------------------------------------------- | | string | boolean | false | Output a JS module exporting an HTML String instead of the HTML itself | | disabled | boolean | false | Bypass the loader entirely (but still respect options.string) | | documentUrl | string | 'http://localhost' | Change the jsdom's URL (affects window.location, document.URL...) | | params | object | null | Options to pass to your prerender function | | env | object | {} | Environment variables to define when building JS for prerendering |


License

Apache 2.0

This is not an official Google product.