Why is pre-rendering a thing again?
Prerendering pages for non-human clients has been a hot topic again, because:
- AI agents and chat services do not run JavaScript when visiting your site. They only read whatever is in the HTML page itself.
- At the same time, many sites and webapps built today, especially with AI coding agents, render everything on the client and don’t use server-side rendering.
Here’s an example
We vibe-coded a simple Vite + React-based dog breeds explorer site (GitHub repo), and deployed it twice:
- https://dogs-explorer.netlify.app/ does not use any pre-rendering.
- https://dogs-explorer-prerender.netlify.app/ has the pre-rendering extension enabled.
The site does not use any server-side rendering (SSR), as it doesn’t actually have any backend. It just calls APIs for the data it needs. Its index.html is basically an “empty shell” that loads the code bundle, just like most single-page application (SPA) sites.
If you visit these the two URLs, they behave & look exactly the same - because they are. But when ChatGPT attemps to fetch content from these sites, there’s a big difference.
Here’s what happens by default, without any pre-rendering (link to chat):
And here it is with pre-rendering! (chat)
Most of the time, you won’t even know if ChatGPT (and all other major AI providers) simply have no visibility into your content.
Why a new extension
We’ve had a prerendering feature for a long time now, but the lack of visibility and configurability kept it in forever-beta state. Sometimes it failed for various reasons, but you had no way to tell, fix or optimize.
So today, we’re publicly launching an alternative: a new extension that’s based on the same platform primitives available to all users (serverless functions, edge functions, and fine-grained caching). Like any extension, it runs under your project.
Here are the most significant benefits to you, compared to the older service:
- Full visibility: the extension adds a function to your project, so you can see exactly when it’s called, how it performs, and check for any issues.
- Optimization and configurability: the extension comes with good defaults for making pre-rendering fast and efficient (it does use a headless browser, mind you) - and you can easily optimize it further if needed, with optional detailed logging of each pre-rendering request.
You can also control cache settings, or drop all cached pre-rendered pages if you want. - Automatically used for all common crawlers, AI crawlers, and AI on-demand agents (e.g. ChatGPT)
Using the extension
- If you’re using the legacy prerendering feature in a project today, disable it: go to Project Configuration->Build & Deploy->Scroll down to “Prerendering” and disable it.
- Click here to install the extension for your account: (this does not automatically enable the extension for any project yet).
- Enable for a project: when navigating to a project in the UI, you will now have “Netlify Prerender Extension (Early Access)” in the bottom of your project sidebar. Click it and check “Enable prerendering”. Save the changes and re-deploy your project.
Testing the extension
To simulate a crawler or AI agent accessing your site, you can you modify the user-agent request header that your browser uses. Here’s where to find that option in Chrome Dev Tools:
When you the reload the page, the browser will send the custom user-agent string.
Review the response headers sent with the HTML page and locate the X-Prerendered header:
You can also compare the actual contents of the HTML page by using “View source” option in your browser.