How do I integrate Prerender with a Single Page Application?

TL;DR

L;DR Single Page Applications (SPAs) built with JavaScript frameworks like React, Angular, and Vue don't return readable HTML to AI crawlers and search engines on first request, so you integrate Prerender to serve them a fully rendered version. Integrate as close to the visitor as possible — at your CDN (Cloudflare, Fastly, CloudFront), reverse proxy, or web server (Nginx, Apache, Node.js). Each option is covered in its own step-by-step guide linked below.

Why SPAs need Prerender.io

SPAs load content with JavaScript after the initial page request. Your website visitors see the finished page once the scripts run, but AI crawlers and search engines often arrive, see an empty or near-empty HTML shell, and leave before your content loads.

Prerender solves this by intercepting crawler requests, rendering your JavaScript page in a headless browser, caching the result, and returning clean HTML to the crawler. Your website visitors never touch this flow — they still get the live, interactive SPA.

The result: your content is readable, indexable, and citable by Googlebot, GPTBot, ClaudeBot, BingBot, and other crawlers that may otherwise miss or misread JavaScript-heavy pages.

Where to integrate Prerender.io

Integrate Prerender.io as close to your website visitors as possible. The closer it is, the lower the latency for crawlers and the simpler the configuration. There are three layers you can integrate at, in order of preference.

1. CDN (recommended)

If you already use a CDN, this is the cleanest integration — no code changes to your application, no server config to maintain. Prerender ships official integrations for the major CDNs:

• Cloudflare
• Fastly
• CloudFront

2. Reverse proxy

If your traffic flows through a reverse proxy (Nginx in reverse-proxy mode, for example), you can route crawler requests to Prerender there. Use the Nginx reverse-proxy config as a starting point.

3. Web server

If you can't integrate at the CDN or proxy layer, integrate at the web server itself. Prerender supports the three most common setups:

• Nginx — three reference configs are available: SPA, PHP application, and reverse proxy.
• Apache — .htaccess-based integration for shared hosting and traditional LAMP stacks.
• Node.js with Express — drop the prerender-node middleware into your Express app:

  const prerenderMiddleware = require('prerender-node');
  app.use(prerenderMiddleware.set('prerenderToken', 'YOUR_TOKEN'));

Hosting platforms without server access

If you're on a hosting platform that doesn't expose your CDN, proxy, or server config (some PaaS providers, shared hosting tiers, or no-code platforms), you have fewer integration points. See how to integrate Prerender on a platform without direct server access for the workarounds.

Verify your integration

After you've followed the matching guide, confirm Prerender is intercepting crawler requests and returning rendered HTML.

→ See Verify your Prerender integration for step-by-step instructions.

If you see the message "Prerender integration not detected," see What should I do if I receive a 'Prerender integration not detected' error? for the most common causes and fixes.

Related articles

• Available integrations — full list of supported CDNs, proxies, and frameworks
• How does Prerender work with CDNs like Cloudflare, Fastly, or Akamai?
• How to check cached versions of your URLs
• Why am I seeing 403 or 404 errors after integrating Prerender?