SEO Fundamentals for JavaScript-Heavy Sites
A client's React SPA had been live for eight months with almost no organic traffic. Search Console showed pages as 'crawled - currently not indexed,' which usually means content isn't visible at render time, not that Google can't execute JavaScript at all. Googlebot does render JS, but it queues rendering separately from crawling, sometimes with a delay of days, and it gives up on scripts that take too long or depend on user interaction.
We used the URL Inspection tool's rendered HTML output to compare what Googlebot actually saw against what a user saw. The gap was significant: primary content was fetched client-side after a loading spinner, and the fetch depended on a viewport-triggered IntersectionObserver that never fired in a headless render context with no scroll events. We removed the observer gate for above-the-fold content entirely.
The real fix was moving from client-side rendering to Next.js with server-side rendering for all indexable routes, keeping CSR only for authenticated, non-indexable views like the dashboard. This wasn't just an SEO fix — it also improved Largest Contentful Paint from 3.8s to 1.4s on mobile, since content no longer waited on a JS bundle to fetch and parse before rendering.
We also found duplicate content issues from client-side query parameters (?ref=, ?utm_source=) generating unique URLs that Google was indexing as separate pages. Canonical tags fixed the duplication, but we also configured the router to strip tracking params before they hit analytics, which cleaned up both SEO and reporting.
Structured data was the last piece. We added JSON-LD for Product, BreadcrumbList, and Organization schema server-side rather than injecting it via a client-side script tag, since Google's structured data testing tool was inconsistently picking up client-injected schema. Within ten weeks of these changes, indexed pages went from 40 out of 600 to 540, and organic sessions roughly tripled.
