Prerendering
Definition
A prerendered page is produced by loading the app in a headless browser, letting it build the DOM, then writing that DOM to disk as an ordinary HTML file. The saved file contains the real headings, the real body text and the real meta tags; the script still loads afterwards and takes over for anyone who interacts, a handover usually called hydration. Prerendering sits between two other approaches. Client-side rendering ships an empty div and builds everything in the visitor's browser. Server-side rendering builds the HTML afresh on every request, which needs a server running somewhere. Prerendering does the work once at build time, so the output is a set of static files that any host can serve — which is the whole point when you have no server at all.
Why It Matters
Prerendering removes your dependence on somebody else's renderer. Googlebot will usually get round to rendering your page; a preview bot in Slack, LinkedIn, WhatsApp or a chat assistant will not render it at any point, and Bing is unreliable about it. A prerendered file answers all of them identically on the first request, with no queue and nothing left to go wrong. It is faster for people too, because the browser paints text from HTML it already has instead of waiting for a bundle to download, parse and execute — on a mid-range phone that typically pulls Largest Contentful Paint down by a second or more. And it costs nothing extra to serve, since the result is a plain file.
How It Works
A build step launches headless Chromium, visits each route on a list you supply, waits either for the network to go quiet or for a ready signal the app fires, then serialises the document element's outerHTML to a file at the matching path. Tools that do this include Puppeteer driven by a short script of your own, react-snap, and the prerender or static-export modes built into frameworks such as Next, Nuxt, Astro and SvelteKit. Each route becomes its own file — /about is written as about/index.html — so a static host can serve the lot with no routing rules at all. Dynamic content is frozen at build time, so anything that must stay current is still fetched by script after load, with the prerendered version acting as the baseline a crawler sees. For a page with no build pipeline, the crude equivalent works surprisingly well: open the finished app, copy the rendered markup out of the browser inspector, and publish that as the file.
Real-World Example
A product team builds a marketing site as a single-page app and uploads the exported bundle to 99helpers at northbeam.99helpers.site. Every route returns the same 3 KB shell, so the pricing page and the homepage share one title and one preview card. Adding react-snap to the build produces four static HTML files — index, pricing, about and contact — each with its own title, meta description and preview image baked into the source. Uploaded to the same address, the site previews correctly in every chat client and is indexed on the first crawl instead of waiting for a second pass.
Common Mistakes
- ✕Prerendering the homepage only — every route that can be shared needs its own file, or they all keep sharing one title and one preview
- ✕Forgetting that the snapshot is frozen — prices, counts and dates captured at build time stay wrong until the next build runs
- ✕Waiting a fixed two seconds instead of waiting for the app's own ready signal — a slow build then captures half-drawn pages
Related Terms
JavaScript SEO
JavaScript SEO is the work of making a page whose content is built by script still crawlable, renderable and indexable — and making sure the many crawlers that never run JavaScript still get something useful.
Client-Side Rendering
A model where the server sends a nearly empty HTML file and JavaScript builds the page in the browser. Nothing is visible until the script has downloaded and run.
Single-Page Application
A single-page application loads one HTML file and then rewrites the page in the browser as you navigate, instead of fetching a new document for every link. The address bar still changes; the page never fully reloads.
Static Hosting
Static hosting is a service that stores a folder of finished web files and serves them over HTTP, without running any application code of yours. You upload the folder; the host answers requests for the files in it.
Open Graph Tags
Meta tags in the head of a page that tell other sites how to draw a link to it — the title, the summary and the picture in a shared card. Without them a link shows as a bare URL.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →