Skip to content

Integration guide

Prerendering on Vercel

Vercel hosts most of the modern Next.js ecosystem. Prerendering integration on Vercel typically uses Edge Middleware to detect crawlers and route them to either an Edge Function rendering layer (for tighter integration) or an external prerendering service (for richer rendering capacity). The right choice depends on your bundle complexity and crawl volume.

Setup overview

Detect verified bots in Edge Middleware. Route bot requests to a prerender source (Edge Function, an external prerender service, or a self-hosted cluster). Return prerendered HTML with appropriate cache headers.

Working snippet

// middleware.ts
import { NextRequest, NextResponse } from 'next/server'

const BOT_UA = /Googlebot|OAI-SearchBot|PerplexityBot|ClaudeBot|GPTBot|Bingbot/i

export const config = {
  matcher: ['/((?!api|_next|_static|favicon).*)'],
}

export function middleware(req: NextRequest) {
  const ua = req.headers.get('user-agent') ?? ''
  if (!BOT_UA.test(ua)) return NextResponse.next()

  // Optional: verify bot via reverse DNS / IP allowlist before rerouting
  const target = new URL('/_prerender' + req.nextUrl.pathname, req.url)
  return NextResponse.rewrite(target, {
    headers: { 'x-prerender-route': req.nextUrl.pathname },
  })
}

Decision criteria

Fits when

  • Site already on Vercel with Edge Middleware available.
  • Bot traffic share is meaningful (>5% of fetches by user-agent).
  • You want bot routing in the same runtime as the rest of the app.

Decision criteria

Avoid when

  • Edge Middleware execution count would push you into a costly tier without offsetting indexation gains.
  • You need full Chromium-headless rendering inline (use external service instead).

Common pitfalls

Watch for these on first rollout

Detecting bots only by user-agent

Bad actors spoof user-agent. For prerendering compliance, also verify reverse DNS or IP allowlist for Googlebot, Bingbot, and other major crawlers. Mistakenly serving prerendered HTML to spoofers is harmless; mistakenly serving SPA HTML to legitimate bots is the bug.

Cache headers that prevent re-fetch

Edge Middleware can rewrite to a cached prerender, but if response cache headers are too aggressive, content updates do not propagate. Set Cache-Control with a TTL that matches your content freshness SLA (typically 60-3600s).

Forgetting to exclude API and static routes

The matcher must skip /api, /_next, and any other route that should never be prerendered. The example matcher does this; verify yours does too.

FAQ

Platform-specific questions

Does Vercel Edge Middleware count against my function invocations?

Yes — every request that matches the middleware matcher counts as a Middleware Invocation on Vercel's pricing. Keep the matcher tight (skip `/api`, `/_next`, static asset paths) so you only pay invocations for routes that could be bot-targeted.

Can I use Vercel Edge Middleware to call an external prerender service?

Yes — `NextResponse.rewrite()` to an external URL works as long as the response is `Content-Type: text/html`. Mind Vercel's edge timeout (typically 25 s) and the prerender service's SLA.

How do I verify bots are actually Googlebot?

Combine User-Agent matching with reverse DNS lookup (forward → PTR → forward chain must match `*.googlebot.com` / `*.google.com`) or use Google's published IP ranges. Avoid User-Agent only matching — spoofing is trivial.

Last updated:

Platform documentation

Authoritative references

Related deep-dives

Want this scoped to your stack?

Generic snippets are useful for orientation; the actual integration needs your routes, your bot traffic mix, your cache strategy. The scoping call is 30 minutes — bring the platform constraints.

Book scoping callBrowse all integrations

Other platforms