JavaScript SEO and Rendering: Two-Wave Indexing Model
JavaScript SEO and Rendering explains Google's two-wave indexing model, showing how CSR, SSR, SSG affect Wave 1 visibility and search rankings.
JavaScript SEO is the most technically complex area of the Technical SEO track — and also the most commonly misunderstood by developers and SEO professionals. Modern websites built with frameworks like React, Vue, Angular, or Next.js often rely heavily on client-side rendering (CSR), where content is not directly present in the initial HTML response. Instead, it is generated dynamically in the browser after JavaScript execution. This creates a critical SEO challenge: if your important content — such as headings, product data, internal links, or structured data — only exists after JavaScript runs, it may not be visible to Google during the first crawl wave. As a result, search engines may index an incomplete or even empty version of the page, which can significantly reduce rankings and visibility. RankAIO's JS Rendering Audit solves this problem by simulating how Googlebot processes pages in two stages. It compares the raw HTML (Wave 1) with the fully rendered DOM after JavaScript execution (Wave 2), clearly highlighting exactly which elements are missing from the initial crawl and identifying high-risk content gaps that could impact SEO performance.
The Two-Wave Indexing Model
CSR vs SSR vs SSG — Which Architecture to Use
| Architecture | How It Works | Google Wave 1 Content | SEO Risk | RankAIO Recommendation |
|---|---|---|---|---|
| CSR Client-Side Rendering | HTML shell delivered. JavaScript fetches data and builds DOM in browser. | Empty or minimal HTML shell | High | Migrate to SSR or SSG for content pages |
| SSR Server-Side Rendering | Full HTML rendered on server per request, sent to browser. | Full content visible | Low | Recommended for dynamic content (listings, search results) |
| SSG Static Site Generation | HTML pre-built at build time, served as static files. | Full content visible | Lowest | Best for content that changes infrequently (articles, guides) |
| ISR Incremental Static Regen | Static pages regenerated on a schedule or on-demand (Next.js feature). | Full content visible | Low | Best for property listings that update daily — static freshness |
RankAIO JS Rendering Audit — Hands-On Tutorial
This tool crawls your site twice: once as a raw HTTP fetcher (simulating Wave 1) and once with full JavaScript execution (simulating Wave 2). It then compares the two versions of each page to identify content that only exists in Wave 2.
The report shows — for each page — the percentage of body text, headings, links, and structured data that was visible in Wave 1 vs Wave 2. Pages with under 60% Wave 1 visibility are flagged as Critical JS SEO risks.
Click into any flagged page to see a side-by-side diff of Wave 1 vs Wave 2 HTML. This shows exactly which elements are missing from Wave 1. For Lapron Homes, the property listing cards and their structured data were entirely absent from Wave 1.
For Next.js: migrate CSR components to getServerSideProps (SSR) or getStaticProps + revalidate (ISR). For other frameworks, evaluate a prerendering service (Rendertron, Prerender.io) that delivers pre-rendered HTML to bots while serving JS to users.
After implementing SSR/ISR, re-run the JS Rendering Audit. Wave 1 content visibility should be at 95%+ for all critical pages. Verify structured data is present in Wave 1 — schema is especially important to serve in initial HTML.
