vibecheck0.3.0
AI readinessaeocontent-requires-jswarning

Content only renders with JavaScript in Next.js

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.

Framework fixes
GeneralReactNext.jsVueSvelteVanilla JS

Symptoms

  • "View source" shows an empty <div id="root"> and no real content
  • Answer engines and some crawlers can’t read or cite the page
  • Link previews (Slack, iMessage) are blank or show only the shell
  • VibeCheck reports almost no text in the raw server HTML

How VibeCheck catches it

In your widget · Problems

warningaeoContent 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

  • A client-only SPA (Vite/CRA) that renders entirely in the browser
  • No SSR, SSG, or prerendering step in the build
  • Content fetched client-side after an empty initial paint

The fix for Next.js

Use Server Components (the App Router default) or generateStaticParams for static generation — both put content in the HTML. Avoid pushing whole pages behind "use client" with client-side data fetching.

tsx
// Server Component (default): data is fetched and rendered to HTML on the server
export default async function Page() {
  const post = await getPost()
  return <article><h1>{post.title}</h1>{post.body}</article>
}

Next.js docs →

Steps

  1. Adopt a framework mode that emits HTML (SSR or static generation)
  2. Ensure the primary content is in the server response, not fetched after load
  3. Verify with “view source” (or curl) that the text is present without JS

See the general, framework-agnostic fix →

FAQ

Doesn’t Google run JavaScript now?
Googlebot does 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 noscript fallback enough?
A meaningful <noscript> block is better than nothing, but SSR/SSG is far more robust because it gives every consumer the full content. Treat noscript as 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.