Prerender.io Setup for SEO SPA: nginx, Express

You launched an SPA on Vue 3 — pages fly, UX is excellent. But Googlebot sees an empty <div id="app">, indexation is zero. Traffic from search doesn't grow. In our practice, a client with an online store on Vue 3 after configuring Prerender.io achieved a 40% increase in indexation within a month, and LCP dropped from 4.2 to 1.1 seconds. We explain how to set up the service correctly and without surprises.

Prerender.io is a SaaS that, upon a bot request, renders the page in headless Chrome and returns ready HTML. For regular users, nothing changes. We have used it in 50+ projects — from corporate sites to marketplaces. Server time savings compared to full SSR — up to 70%, and server load decreases 3–5 times.

Problems We Solve

SPAs by default do not deliver content when JavaScript is disabled — search bots see an empty index.html. As a result:

• Pages don't get into search results (or get indexed with errors).
• Snippets are empty, Title is "React App".
• Internal links are not indexed.

For example, a client with a catalog of 10,000 products: without prerender, bots indexed only 12 out of 10,000 pages. After setup — 8,500 pages in a week.

Typical mistakes:

• nginx does not distinguish between bots and humans.
• Middleware incorrectly filters User-Agent.
• Cache is not cleared after deployment.

In 90% of cases, the problem is exactly in User-Agent filtering. We configure Prerender.io taking these nuances into account — so that bots get full HTML and users get a fast SPA.

Why Prerender.io Instead of Full SSR?

SSR (Nuxt 3, Next.js) renders every page on the server — that's load and complexity. Prerender.io does it only for bots: it spends resources only on rendering for search engines. Server time savings — up to 70% compared to SSR. Plus, you don't need to rewrite the frontend — it works with any SPA framework. In practice, Prerender.io reduces server load by 3–5 times for high-traffic projects, especially if most pages are static.

How It Works (Schematic)

1. Bot requests /products/42.
2. nginx / middleware detects User-Agent 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 — no changes.

Setting Up Prerender.io for SPA

nginx Configuration

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 for Node.js (Express)

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) 

The prerender-node library is available on GitHub.

How to Set Up Automatic Recaching on Deploy?

Prerender.io caches pages automatically. But after deploy, the cache must be cleared for changed URLs. We automate this via API:

# Clear a 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 

If there are many pages, we use precaching via sitemap:

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']) 

Prerender.io stores cache on its servers. Default cache TTL is 30 minutes; it can be configured via Cache-Control headers. We recommend setting max-age=3600 for static pages and no-cache for dynamic ones. Automatic recache on deploy ensures bots see the current version.

How to Verify That Prerender Works?

# 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 a real title, not "React App" or empty string 

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

What Advantages Does Prerender.io Offer for SPA?

Fast integration — setup takes from 0.5 days. No code rewrite required. Server resource savings up to 70%. Average cold page first-render time — 1.5 seconds, hot — 100 ms. Prerender.io supports all popular frameworks: Vue, React, Angular.

What's Included in Turnkey Setup

Timeline and Cost

Basic setup (nginx + precache) — from 0.5 to 1 working day. Complex integration (multiple middleware, custom recache) — up to 2 days. Cost is fixed and calculated individually. We guarantee that after setup, Googlebot will start seeing content. Our team has 10+ years of experience and has completed 50+ projects on SPA SEO optimization.

Order Prerender.io setup — get a consultation from an engineer. Contact us to discuss your project. Get an engineer consultation — we'll help you choose the optimal solution.