prerender

Prerender, or prerendering, is a web development technique that generates static HTML snapshots of web pages ahead of time and serves those snapshots to clients, typically crawlers and sometimes first-time visitors. It is used to improve performance and search engine optimization for applications that rely heavily on client-side JavaScript, such as single-page applications.

How it works: A prerendering pipeline renders the target page in a headless browser or static generator, capturing the resulting DOM and assets. The output is stored as static HTML and possibly associated assets. When a request arrives, a prerender router detects crawler or bot user agents and serves the prerendered HTML instead of the usual app shell. The content can be cached and updated on a schedule or when source content changes.

Types and workflows: Build-time prerendering generates static pages during the build process for sites with known routes. Run-time or dynamic prerendering uses a service or server to render pages on demand for bots, then caches the result for subsequent requests. Some setups employ headless browsers like Puppeteer or Playwright to render pages and capture the final HTML, while others rely on server-side rendering frameworks.

Benefits and limitations: Prerendering can improve perceived performance and ensure content is indexable by search engines that do not fully execute JavaScript. It can reduce time-to-content for initial loads. Limitations include the risk of serving stale content if pages change after rendering, added build or infrastructure complexity, and challenges with highly dynamic or personalized content.

Examples of tools and services include prerender.io, Rendertron, and various open-source solutions that integrate with popular frontend frameworks.