SPA prerendering setup with Prerender.io

Setting Up Prerendering for SPA Sites (Prerender.io)

Prerender.io is a SaaS service for pre-rendering SPA pages. It automatically detects search bots and serves them fully rendered HTML instead of empty index.html.

How It Works

1. Bot requests /products/42
2. nginx intercepts the request and proxies to prerender.io
3. Prerender.io renders the page in headless Chrome
4. Returns ready HTML to the bot

Users get the regular SPA unchanged.

Nginx Setup

map $http_user_agent $prerender_ua {
    ~*(Googlebot|AdsBot-Google|Googlebot-Image|Bingbot|Slurp|
       DuckDuckBot|Baiduspider|YandexBot|LinkedInBot|
       facebookexternalhit|Twitterbot|WhatsApp|TelegramBot)  "1";
    default "0";
}

server {
    listen 443 ssl;
    server_name company.com;

    location / {
        if ($prerender_ua = "1") {
            rewrite .* /$scheme://$host$request_uri? break;
            proxy_pass https://service.prerender.io;
            proxy_set_header X-Prerender-Token "YOUR_API_TOKEN";
            proxy_set_header X-Prerender-Host $host;
            proxy_connect_timeout 5s;
            proxy_read_timeout 60s;
        }

        try_files $uri /index.html;
    }
}

Middleware Setup (Express/Node.js)

const prerender = require('prerender-node')

prerender.set('prerenderToken', process.env.PRERENDER_TOKEN)
prerender.set('prerenderServiceUrl', 'https://service.prerender.io/')

// Optional settings
prerender.crawlerUserAgents.push('TelegramBot', 'WhatsApp')
prerender.set('blacklistPaths', ['/admin', '/dashboard', '/api'])

app.use(prerender)

Caching via Prerender.io

Service caches pages automatically. Management via dashboard or API:

# Clear specific URL
curl -X POST https://api.prerender.io/recache \
  -H "Content-Type: application/json" \
  -d '{"prerenderToken": "YOUR_TOKEN", "url": "https://company.com/product/42"}'

# Recache on deploy (list of changed URLs)
CHANGED_URLS=$(git diff HEAD~1 --name-only | grep "pages/" | ...)
for url in $CHANGED_URLS; do
  curl -X POST https://api.prerender.io/recache \
    -d "{\"prerenderToken\": \"$TOKEN\", \"url\": \"https://company.com/$url\"}"
done

Sitemap-based Precache

import requests
import xml.etree.ElementTree as ET

def precache_sitemap(sitemap_url, prerender_token):
    response = requests.get(sitemap_url)
    root = ET.fromstring(response.content)
    ns = {'sm': 'http://www.sitemaps.org/schemas/sitemap/0.9'}

    urls = [loc.text for loc in root.findall('.//sm:loc', ns)]
    print(f"Precaching {len(urls)} URLs...")

    for url in urls:
        requests.post('https://api.prerender.io/recache',
                     json={'prerenderToken': prerender_token, 'url': url})

precache_sitemap('https://company.com/sitemap.xml', os.environ['PRERENDER_TOKEN'])

Verification

# Request as Googlebot
curl -A "Googlebot/2.1 (+http://www.google.com/bot.html)" \
  https://company.com/products/iphone-15 | \
  grep -o '<title>[^<]*</title>'

# Should return actual title, not "React App" or empty

Chrome DevTools → Network → Disable JS → reload — if content is visible without JS, prerendering works correctly for bots.

Prerender.io Limitations

• Paid from $9/month, limits on render count
• Delay for first render (cold start)
• Not suitable for personalized pages (content depends on user)
• Rendering without user cookies

Timeline

Setting up Prerender.io with nginx middleware and precache — 0.5–1 business day.