gitmyhub

prerender-spa-plugin

JavaScript ★ 7.3k updated 3y ago ▣ archived

Prerenders static HTML in a single-page application.

A deprecated webpack plugin that visits each page of your single-page app in a headless browser during the build step and saves the result as static HTML, so search engines can index the content without running JavaScript.

JavaScriptwebpackNode.jssetup: moderatecomplexity 2/5

This is a plugin for a build tool called webpack that solves a specific problem with single-page applications. A single-page application is a website where the browser downloads one HTML file and then builds all the visible content using JavaScript. The trouble is that search engines and some social media link previews struggle to read content that JavaScript draws, because they often do not wait for the scripts to run. The result is that these sites can be nearly invisible to search engines.

Prerender SPA Plugin works around that problem by visiting each of your pages during the build step, before you publish the site. It opens each page in a headless browser (one that runs without a visible window), waits for the content to appear, captures the resulting HTML, and saves it as a static file. When a search engine or a visitor's browser requests that page, they get the pre-built HTML immediately, with no JavaScript required to see the content.

You configure it by listing the routes you want captured and pointing it at the folder where your built app lives. Basic usage needs only those two settings. More advanced options let you control when the plugin considers a page ready to capture, such as waiting for a specific element to appear, waiting for a custom event your app fires, or setting a time limit. You can also post-process the captured HTML to clean up whitespace or adjust file paths.

The plugin works with any JavaScript framework, including Vue, React, Angular, and plain JavaScript. Examples for each are included in the repository.

Note that the README marks this project as deprecated and lists it as seeking new maintainers. It is no longer actively developed. Teams starting a new project may want to look at current alternatives rather than adopting this plugin for new work.

Where it fits