JavaScript SEO: How to Make React Sites Rank (SSR vs SSG)

JavaScript SEO is the practice of making sure search engines and AI crawlers can crawl, render and index sites built with JavaScript frameworks like React. React sites can absolutely rank, but the rendering strategy you choose decides how easily they do. This guide explains how Google handles JavaScript, compares SSR, SSG and ISR, and gives you a checklist for fixing an existing React app.

Can React sites rank on Google?

Yes. React sites rank well when their important content, links and metadata are available to crawlers, ideally in the initial HTML. Problems usually come from client-side-only rendering, not from React itself.

The risk has grown with AI search. Google can render JavaScript, but Vercel's December 2024 research on AI crawlers found that major AI crawlers from OpenAI, Anthropic, Meta, ByteDance and Perplexity did not render JavaScript. A client-rendered page may rank in Google yet be blank to ChatGPT search.

How does Google process JavaScript pages?

Google processes JavaScript web apps in three phases: crawling, rendering and indexing. Pages are fetched, queued for rendering in a headless Chromium browser, then indexed based on the rendered HTML.

1. Crawling: Googlebot fetches the URL and checks robots.txt, then parses links in the raw HTML.
2. Rendering: according to Google's JavaScript SEO basics, pages with a 200 status are queued for rendering, and may wait in that queue before JavaScript runs.
3. Indexing: Google uses the rendered HTML to index content and discover additional links.

Google's guide adds that server-side or pre-rendering is still a great idea because it makes sites faster for users and crawlers, and notes that not all bots can run JavaScript.

What is the difference between CSR, SSR, SSG and ISR?

The difference is where and when the HTML is produced: in the browser, on the server per request, at build time, or at build time with background updates.

web.dev's Rendering on the Web defines static rendering as happening at build time, and SSR as rendering on the server to send HTML rather than JavaScript. It recommends considering server-side or static rendering over a full rehydration approach.

Which rendering strategy should you choose for SEO?

Choose static generation wherever content is the same for every visitor, and SSR where content must be fresh or personalized at request time. Most real sites mix both by route.

• Use SSG for home, service, about, blog and documentation pages.
• Use ISR or cached static output for product and category pages that change daily.
• Use SSR for search results, pricing that varies by region or pages showing live inventory.
• Keep CSR for authenticated areas that should not be indexed anyway.

Frameworks make this easier. React's documentation recommends starting new apps with a framework such as Next.js or React Router, noting they support CSR, SPAs and static generation, and let you add server rendering per route. In Next.js 16, Cache Components and Partial Prerendering serve a static shell instantly and stream or regenerate the rest.

If the content matters for search, it belongs in the HTML, not behind a loading spinner.

How do you fix a client-side rendered React SPA?

The most durable fix is moving public routes to a framework with SSR or SSG. If a full migration is not possible right now, prerender your public pages at build time as an interim step.

1. Inventory routes and separate public, indexable pages from logged-in app screens.
2. Prerender public routes to static HTML at build time, or migrate them to Next.js or React Router with static generation.
3. Move titles, meta descriptions, canonicals and structured data into the server-rendered head.
4. Replace click handlers used for navigation with real anchor links that include an href.
5. Return true 404 status codes for missing pages instead of a 200 with an error message.
6. Re-test with Search Console's URL Inspection tool and a plain HTML fetch.

Avoid building new dynamic rendering setups that serve bots a different version. Google's documentation on dynamic rendering states it is a workaround and not a recommended solution, and points to server-side rendering, static rendering or hydration instead.

What should a JavaScript SEO checklist for React include?

Check these items on every release that touches routing, rendering or templates.

• Primary content and H1 present in the initial HTML response.
• Unique title and meta description per route, rendered on the server.
• Links are anchor elements with href attributes, not buttons with onClick.
• Client-side routing uses the History API, not URL fragments, for different content.
• Canonical tag set in HTML and not changed by JavaScript to a different value.
• No noindex in the initial HTML on pages you want indexed; Google may skip rendering when it sees one.
• Static assets use content fingerprinting for long-lived caching.
• Core Web Vitals monitored, especially INP, since heavy hydration hurts responsiveness.

How do you test what Google actually renders?

Compare the raw HTML your server returns with the rendered HTML Google sees. Gaps between the two show exactly what depends on JavaScript.

• Search Console URL Inspection: run a live test and view the rendered HTML and screenshot for a page.
• Rich Results Test: confirms that structured data survives rendering and is valid.
• View source versus browser DevTools: view source shows server HTML, while the Elements panel shows the DOM after JavaScript.
• Server logs: confirm Googlebot and AI crawlers receive 200 responses for your key routes, not redirects or errors.

Repeat these checks after framework upgrades, because a change to data fetching or routing can quietly move content from the server to the client.

What are the most common JavaScript SEO mistakes?

Most issues come from treating a marketing site like an app. These are the patterns we see most often.

• Soft 404s: SPAs returning 200 for every URL, which Google flags as soft 404s.
• Removing noindex with JavaScript: Google may never render the page to see the change.
• Lazy-loading critical content only on scroll or interaction.
• Blocking JavaScript or API endpoints in robots.txt that rendering depends on.
• Heavy hydration that delays interactivity and hurts INP; see our INP optimization guide.

Next steps

Advotis Agency builds and migrates React applications with SEO-ready rendering from day one. Explore our web application development services or contact our team for a JavaScript SEO and rendering audit.

Frequently asked questions

Advotis Engineering Team

Written and reviewed by the Engineering Team at Advotis Agency — specialists who build and grow websites, apps and AI products for clients every day. About us