chrisvfritz/prerender-spa-plugin

★ 7,281JavaScriptAudience · developerComplexity · 2/5Setup · moderate

Mindmap

mindmap
  root((prerender-spa-plugin))
    What it does
      Pre-render SPA routes
      Static HTML snapshots
      Fix SEO visibility
    Tech stack
      webpack plugin
      Headless browser
      Any JS framework
    Configuration
      Route list
      Capture trigger options
      HTML postprocessing
    Status
      Deprecated
      Seeking maintainers

mindmap root((prerender-spa-plugin)) What it does Pre-render SPA routes Static HTML snapshots Fix SEO visibility Tech stack webpack plugin Headless browser Any JS framework Configuration Route list Capture trigger options HTML postprocessing Status Deprecated Seeking maintainers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Pre-render specific routes of a Vue or React app at build time so search engines can read the content without executing JavaScript

USE CASE 2

Generate static HTML snapshots of your SPA pages before deploying to a CDN so the first load is instant for any visitor

USE CASE 3

Capture Open Graph meta tags by rendering pages that populate social media preview data before the site goes live

Tech stack

JavaScriptwebpackNode.js

Getting it running

Difficulty · moderate Time to first run · 30min

Deprecated with no active maintainers, configure in webpack.config.js by listing every route you want captured.

In plain English

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.

Copy-paste prompts

Prompt 1

Add prerender-spa-plugin to my webpack config to pre-render the /, /about, and /contact routes of my Vue app.

Prompt 2

Configure the plugin to wait for a custom content-ready event my React app fires before capturing the HTML snapshot.

Prompt 3

Set up postprocessing in prerender-spa-plugin to strip extra whitespace and fix absolute asset paths in the captured HTML output.

Prompt 4

Show me how to pre-render a Vue Router app that has dynamic routes like /product/:id using prerender-spa-plugin.

Open on GitHub → Explain another repo

← chrisvfritz on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.