Prerendering

Prerendering is a web optimization technique in which HTML for pages is generated in advance, before any user requests are made. This is typically done during a build process or by a prerendering service, and the resulting static HTML pages are served to clients. The approach aims to provide fast initial paint and better search engine visibility for applications that rely heavily on client-side JavaScript.

Prerendering is commonly contrasted with server-side rendering and purely client-side rendering. In static prerendering, the pages are pre-generated as static files at build time and stored on a server or content delivery network. Dynamic or incremental prerendering, by contrast, creates or refreshes pages on demand—often when the first request for a route occurs or on a scheduled revalidation—and then caches the result.

The process typically involves rendering the page with a headless browser or server-side renderer, executing JavaScript to produce the final HTML. For dynamic routes, a prerendering tool may visit each route, fill in data, and save the output. Some systems support on-demand re-generation to keep content reasonably fresh without rebuilding the entire site.

Benefits of prerendering include fast time-to-interactive, improved SEO for crawlers that do not execute JavaScript well, and reduced work for the client's browser. Drawbacks can include longer build times, increased storage, and potential challenges keeping data up to date for highly dynamic sites.

Commonly used in static site generation and modern frameworks, prerendering is provided by tools and features such as Gatsby, Next.js in static generation mode, Nuxt.js generate, and SvelteKit prerender. It is also accessible via external services that simulate rendering for bots.