Add server-side rendering — v0
AI crawlers usually do not execute JavaScript. If your content is only in a useEffect, ChatGPT sees a blank page. Pre-rendered HTML is required for AI citations and faster Google indexing.
Fixing this in v0
Vercel AI component and app generator
v0 generates App Router code. Leave the main page file server-side; push interactive widgets into `"use client"` child components only.
Using a different tool? Pick your stack:
The prompt for v0
Copy and paste this into your v0 chat exactly as-is.
Regenerate my v0 component / page with these fixes applied: Render content server-side 1. Convert client components to Server Components where possible (remove "use client" from pages that only render data). 2. Move data fetching out of useEffect into the server component body. 3. Verify by viewing the page source (Ctrl+U) — the body text should be present without JS.
Why this matters
There are two kinds of crawlers: those that execute JavaScript (Googlebot — mostly, slowly) and those that do not (GPTBot, ClaudeBot, most AI tools, social preview scrapers). If your content is client-rendered only, the second category sees an empty shell and cannot cite you.
Pure SPAs — Create React App, unmodified Vite React, etc. — have this problem by default. The HTML response is a single `<div id="root"></div>` and everything else appears after JS runs. Fine for users, broken for AI search.
The fix is SSR or SSG. Next.js App Router does this by default. Lovable and Bolt projects based on Vite need either a Vite SSR adapter, a move to Next/Remix/Astro, or at least a pre-rendered static export for key pages.
How to use this prompt in v0
- 1. Open your v0 project.
- 2. Copy the prompt above with the copy button.
- 3. Paste into the v0 chat and send.
- 4. Review the diff, accept the changes, redeploy.
- 5. Verify the fix using the checklist below.
Common mistakes to avoid
- error_outlinePutting the entire page inside a useEffect that fetches content — nothing ships in the HTML.
- error_outlineMarking a whole page as `"use client"` in Next.js — you lose SSR benefits.
- error_outlineLoading content from an API on the client when you could fetch server-side.
- error_outlineUsing dynamic imports for content components — the content is not in the initial HTML.
How to verify the fix worked
- check_circle`curl -s https://yoursite.com/page | grep "YOUR HEADLINE"` — must return a match.
- check_circleDisable JavaScript in Chrome DevTools → Settings → Debugger → reload — core content must still be visible.
- check_circleView source (Ctrl+U) — the H1, first paragraph, and key CTAs must be in the raw HTML.
- check_circleOpen `view-source:yoursite.com/page` — search for your meta description text.
Frequently asked questions
Does Google render JavaScript?expand_more
Do I need to migrate my whole app to Next.js?expand_more
What about hydration errors?expand_more
Want all 34 prompts tailored to your v0 site?
Pantra scans your site in 10 seconds, detects the stack, and generates the exact prompts that apply — only the ones you actually need.
Scan my siteRelated v0 prompts
Put key content in static HTML — v0
Prompt to ensure your headings, paragraphs, and FAQs are in the raw HTML, not rendered via client JS.
AI Search / GEOAllow GPTBot, ClaudeBot, and PerplexityBot — v0
Prompt to whitelist AI crawlers so ChatGPT, Claude, and Perplexity can cite your pages. Works in any AI-coded stack.
AI Search / GEOAdd an llms.txt file — v0
Stack-specific prompt to publish llms.txt — a curated guide telling LLMs what your site is about.
AI Search / GEOAdd JSON-LD structured data — v0
Prompt to add Organization, Article, and FAQ JSON-LD to <head> — tells Google and AI crawlers exactly what your page represents.