JavaScript Rendering

Why It Matters for AI Visibility

How We Score It

How to Improve

• 1

  Switch to server-side rendering for content-heavy pages

  If you use React, Vue, or Angular, adopt SSR (server-side rendering) or SSG (static site generation) for pages that need AI visibility. Next.js, Nuxt, and Angular Universal all support this. SSR ensures your content is in the HTML before any JavaScript executes, making it immediately visible to AI crawlers.

• 2

  Pre-render critical content in the initial HTML payload

  Even without full SSR, ensure headlines, body text, and key data are in the initial HTML. Lazy-load interactive widgets and non-essential UI elements, but never lazy-load the primary content. The first HTML response should contain everything an AI crawler needs to understand the page.

• 3

  Audit your JS dependency with a raw HTML test

  View your page's source (not the inspector -- the actual page source). If the main content area is empty or contains only JavaScript bundle references, AI crawlers see the same emptiness. Compare the source to the rendered page and identify which content blocks are missing.

• 4

  Move API-fetched content to server-side data loading

  If your page fetches content from an API on the client side (useEffect, fetch on mount), move that data fetching to the server. In Next.js, use server components or getServerSideProps. The data should arrive as HTML, not as a client-side API call that AI crawlers will never execute.

• 5

  Test with JavaScript disabled in your browser

  Disable JavaScript in your browser settings and load your page. What you see is what AI crawlers see. If the page is blank or missing core content, you have a JavaScript rendering dependency that needs fixing.

Before & After

<!-- Raw HTML source -->
<div id="root"></div>
<script src="/bundle.js"></script>
<!-- All product info loaded via JS: 85% content difference -->
<!-- Score: 1 -->

<!-- Server-rendered HTML -->
<div id="root">
  <h1>Wireless Noise-Canceling Headphones</h1>
  <p>Premium audio with 30-hour battery life...</p>
  <ul>
    <li>Active noise cancellation</li>
    <li>Bluetooth 5.3</li>
    <li>30-hour battery</li>
  </ul>
</div>
<script src="/bundle.js"></script>
<!-- Content in HTML, JS hydrates for interactivity: 5% difference -->
<!-- Score: 10 -->

Code Examples

// app/products/[id]/page.tsx -- Server Component (default in Next.js App Router)
export default async function ProductPage({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id); // Fetched on server

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <ul>
        {product.features.map(f => <li key={f}>{f}</li>)}
      </ul>
    </main>
  );
}

// Avoid this pattern for content pages
'use client';
import { useEffect, useState } from 'react';

export default function ProductPage({ params }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`/api/products/${params.id}`)
      .then(res => res.json())
      .then(setProduct);
  }, []);

  if (!product) return <div>Loading...</div>;
  return <h1>{product.name}</h1>;
}

Frequently Asked Questions