snapcrawl-vercel-ssr

SnapCrawl Vercel SSR

HTML prerendering for Vercel projects powered by SnapCrawl.

This package provides simple helpers for:

• Next.js (App/Pages Router) via a one-line middleware
• Static SPAs and Express apps on Vercel via an Edge Function + tiny vercel.json route

Why SnapCrawl?

Search and social crawlers often struggle with client-side apps (React, Vue, Angular, etc.). SnapCrawl renders your pages server-side and returns fully-formed HTML to bots — improving SEO, social previews, and crawl reliability.

This package makes SnapCrawl plug-and-play on Vercel's Edge Runtime.

Your API Secret

🔑 Get your API secret

• Create an account (or sign in): snapcrawl.io
• Go to your Dashboard → Secret keys
• Copy your Secret Key

Installation

npm install snapcrawl-vercel-ssr
# or
yarn add snapcrawl-vercel-ssr

Set your secret in Vercel → Project Settings → Environment Variables:

• SNAPCRAWL_SECRET = your-secret-value

Usage

1) Vercel – Next.js (Middleware)

Create or edit middleware.{js,ts} at the project root:

// middleware.js
import { withSnapCrawl } from "snapcrawl-vercel-ssr/next";

function otherMiddleware() {
  // Optional: your existing logic
}

export default withSnapCrawl({ secret: process.env.SNAPCRAWL_SECRET })(
  otherMiddleware
);

• SnapCrawl only handles crawler traffic and HTML routes (skips assets).
• If SnapCrawl is unreachable or returns success:false, the middleware falls back to your normal app.

2) Vercel – Other Frameworks (Static SPA & Express)

Add an Edge Function and a tiny route that sends crawler traffic to it.

vercel.json

{
  "routes": [
    {
      "src": "/(.*)",
      "has": [
        {
          "type": "header",
          "key": "user-agent",
          "value": "(?i)(applebot|baiduspider|bingbot|bitlybot|bitrix link preview|chatgpt-user/2\\.0|chrome-lighthouse|developers\\.google\\.com/\\+/web/snippet|discordbot|embedly|facebookexternalhit|flipboard|google page speed|google-cloudvertexbot|google-extended|googlebot|googleother|gptbot|ia_archiver|linkedinbot|mistralai-user/1\\.0|nuzzel|outbrain|perplexity-user/1\\.0|pinterest/0\\.|pinterestbot|quora link preview|qwantify|redditbot|rogerbot|seznambot|showyoubot|skypeuripreview|slackbot|swiftbot|telegrambot|tumblr|twitterbot|vkshare|w3c_validator|whatsapp|xing-contenttabreceiver|yahoo! slurp|yandex)"
        }
      ],
      "dest": "/api/snapcrawl"
    }
  ]
}

api/snapcrawl.js

import { createEdgeHandler } from "snapcrawl-vercel-ssr";
export const config = { runtime: "edge" };

export default createEdgeHandler({ secret: process.env.SNAPCRAWL_SECRET });

How it works

• Humans: served by your CDN/app as usual.
• Bots: routed to /api/snapcrawl where SnapCrawl returns prerendered HTML.
• If the API fails, the handler sends a 204 so Vercel serves the normal app.

What It Does

• Detects popular bots via User-Agent (Next.js middleware also uses a tiny heuristic)
• Detects desktop vs mobile crawlers to render appropriately
• Skips assets like .js, .css, images, fonts, etc.
• Calls SnapCrawl SSR API and serves HTML directly to the crawler
• Falls back gracefully on errors

API

withSnapCrawl({ secret })

Wraps (or acts as) your Next.js middleware default export.

• Params
  • secret (string, required): your SnapCrawl API secret.
• Returns: a Next.js middleware function.
• Behavior: Handles crawler requests for HTML routes; otherwise calls NextResponse.next() or your existing middleware.

createEdgeHandler({ secret })

Edge Function handler for SPA/Express projects on Vercel.

• Params
  • secret (string, required): your SnapCrawl API secret.
• Returns: an Edge handler that responds with prerendered HTML for bots, or 204 to let Vercel serve your app.