Content only renders with JavaScript in React
When the HTML your server sends is an empty shell and all the content is painted by JavaScript in the browser, any crawler or agent that doesn’t execute JS — many AI answer engines, some social scrapers, low-power bots — sees a blank page. Client-only SPAs (a very common AI default with plain Vite/CRA) are invisible to exactly the audiences AEO is about.
Symptoms
How VibeCheck catches it
In your widget · Problems
Content only renders with JavaScript
To your coding agent · MCP
agent › get_detected_issues
→ { detector: "aeo", issue: "Content only renders with JavaScript", threshold: "The raw server HTML contains fewer than 200 characters of body text" }
The same string in your widget and in your agent’s context — no screenshot, no copy-paste.
Root causes
The fix for React
A plain Vite/CRA app is client-only. Move to a framework with SSR/SSG (Next.js, Remix/React Router) or add a prerender step (e.g. vite-plugin-ssg) so pages ship real HTML.
# add build-time prerendering to a Vite React app
npm i -D vite-react-ssgSteps
- Adopt a framework mode that emits HTML (SSR or static generation)
- Ensure the primary content is in the server response, not fetched after load
- Verify with “view source” (or
curl) that the text is present without JS
FAQ
- Doesn’t Google run JavaScript now?
Googlebotdoes render JS, but on a delay and with a budget, and many other crawlers and AI answer engines do not render at all. Server-rendered HTML is read immediately and universally — you shouldn’t rely on client rendering for content you want indexed and cited.- Is a
noscriptfallback enough? - A meaningful
<noscript>block is better than nothing, but SSR/SSG is far more robust because it gives every consumer the full content. Treatnoscriptas a stopgap, not the fix. - How does VibeCheck detect this?
- It re-fetches your page’s own URL and measures the text in the raw HTML the server returned. Under ~200 characters of body text means the content is being built client-side.