Add server-side rendering — Claude Code

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.

rocket_launch

Fixing this in Claude Code

Anthropic's official terminal coding agent

Claude Code can grep the whole codebase first, plan the change, then edit every affected file. Paste the prompt below into your Claude Code chat and the fix rolls out across the project in one pass.

Using a different tool? Pick your stack:

Lovable Cursor Bolt v0 Replit Windsurf Claude Code Base44

The prompt for Claude Code

Copy and paste this into your Claude Code chat exactly as-is.

Run Claude Code in the project root and make these exact changes, scanning the whole codebase first:

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 Claude Code

1. Open your Claude Code project.
2. Copy the prompt above with the copy button.
3. Paste into the Claude Code 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

Yes, but with a delay ("second wave indexing") and not perfectly. Relying on JS-only content for SEO is fragile. For AI search, JS rendering does not happen at all.

Do I need to migrate my whole app to Next.js?expand_more

Not necessarily. Pre-render the public marketing pages with a static generator and keep the logged-in app as an SPA. Best of both worlds.

What about hydration errors?expand_more

Hydration errors happen when server-rendered HTML differs from client-rendered. Common cause: using Date.now() or random numbers in render. Fix by moving those to useEffect.

Want all 34 prompts tailored to your Claude Code 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 site

Related Claude Code prompts

AI Search / GEO