# Content only renders with JavaScript in Vanilla JS

> How to fix content only renders with javascript in Vanilla JS — with the exact fix and copy-paste code.

_Category: AI readiness · Detector `aeo` · Check `content-requires-js` · Severity: warning_

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.

## The fix for Vanilla JS

Render the HTML on the server (any templating layer) or generate static HTML files at build. Don’t rely on client JS to inject the primary content.

```html
<!-- server-rendered: the content is already in the HTML -->
<main><h1>Real title</h1><p>Real content, present before any JS runs.</p></main>
```

### 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

## How VibeCheck detects it

The `aeo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP.

- **Issue string:** `Content only renders with JavaScript`
- **Threshold:** The raw server HTML contains fewer than 200 characters of body text

## 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.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/content-requires-javascript.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/content-requires-javascript. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt