Vercel (CSR) SEO

Your Vercel CSR App Is Invisible to Google

If you deployed a client-side rendered app to Vercel -- think Create React App, Vite, or a plain React SPA -- your site looks great in the browser but is practically empty to search engines. When Googlebot visits, all it sees is a blank HTML shell with a <div id="root"></div> and a bunch of JavaScript. No content, no meta tags, no headings. Nothing to index.

This only applies to client-side rendered apps. If you are using Next.js with SSR or SSG, Vercel already serves fully rendered HTML and you do not need RndrKit.

What RndrKit Does

RndrKit sits between your visitors and your Vercel app. When a search engine bot visits your domain, RndrKit renders the page in a headless browser and serves the fully rendered HTML. Human visitors are proxied straight to your Vercel app with no changes to their experience.

The result: Google sees your full page content, meta tags, Open Graph data, and structured data -- exactly what a real user sees after JavaScript loads.

Setup

Step 1: Find Your Vercel App URL

Your Vercel app has a default URL that looks like:

your-project.vercel.app

You can find this in your Vercel dashboard under your project settings. This is your origin URL -- the address RndrKit will fetch content from.

Step 2: Remove Your Custom Domain from Vercel

This is the most important step. Before configuring RndrKit, you must remove your custom domain from the Vercel project.

Go to your Vercel project settings.
Navigate to Domains.
Remove your custom domain (e.g., www.example.com).
Keep the default *.vercel.app URL -- this becomes your origin.

If you skip this step, Vercel and RndrKit will fight over who handles the domain, and DNS will not resolve correctly.

Create your account at rndrkit.io. Once logged in, you will be taken to the dashboard.

Step 4: Add Your Domain

Click Add Domain and enter:

Field	Example	Description
Custom Domain	`www.example.com`	The domain your visitors use
Origin URL	`your-project.vercel.app`	Your Vercel app's default URL

Step 5: Configure DNS

Go to your DNS provider and create a CNAME record:

Type	Name	Value	TTL
CNAME	www	cname.rndrkit.io	Auto

If you are using Cloudflare, set the proxy status to DNS only (gray cloud).

For detailed instructions, see DNS Configuration.

Step 6: Verify

Wait a few minutes for DNS to propagate, then test:

# Bot request -- should return fully rendered HTML
curl -s -A "Googlebot/2.1" "https://www.example.com/" | head -50

# Human request -- should return your SPA shell
curl -s "https://www.example.com/" | head -50

Platform-Specific Notes

Remove Your Domain from Vercel First

This bears repeating because it is the number one setup mistake. Vercel's edge network will intercept requests to any domain configured in its dashboard. If your custom domain is still attached to your Vercel project, traffic will not route through RndrKit.

Before you update DNS, go to Vercel > Project Settings > Domains and remove your custom domain entirely.

Do You Actually Need RndrKit?

If your Vercel project uses Next.js with SSR or SSG, the pages are already rendered on the server. You do not need pre-rendering. RndrKit is specifically for:

Create React App (CRA)
Vite + React / Vue / Svelte (client-side only)
Any SPA framework that ships a blank HTML shell

Vercel Edge Functions and Middleware

If you use Vercel Edge Functions or middleware, those will still run on requests to your *.vercel.app origin. RndrKit does not interfere with server-side logic on your origin.

SEO Quick Wins

Once RndrKit is active, make sure your app includes:

Title tags on every page -- unique and descriptive
Meta descriptions -- compelling summaries for search results
Open Graph tags -- so links look good when shared on social media
Canonical URLs -- pointing to your custom domain, not vercel.app
Structured data (JSON-LD) -- helps Google understand your content

Verify It Works

curl -s -A "Googlebot/2.1" "https://www.example.com/" | head -100

You should see fully rendered HTML with your page content. If you see an empty shell or an error, check the troubleshooting guide.

Next Steps

Analytics -- See which bots are crawling your site
Cache Warming -- Pre-render important pages for fast bot responses
SEO Audit -- Check your pages for common SEO issues
Sitemaps -- Help search engines discover all your pages