JavaScript SEO for React and Next.js: A Crawler-View Guide

Compare what arrives in the initial response with what appears after JavaScript runs, then fix the delivery path for Google and AI crawlers.

React and Next.js are not inherently bad for SEO. Google can render JavaScript, and Next.js can send a public page as static or server-rendered HTML. The risky case is browser-only content: Google adds a rendering step, while OpenAI's crawler documentation does not promise JavaScript execution. Put the main answer, metadata, links, and structured data in the initial HTML.

The short answer

Googlebot can execute JavaScript, though blocked resources and failed rendering still matter. OpenAI documents separate search, training, and user-fetch agents without publishing a browser-rendering contract. Server-render the facts a crawler must understand, keep interactive React at the edges, and test each delivery path directly.

Google and ChatGPT use different crawler contracts

“Can a crawler read this page?” needs a named agent and purpose. Google documents JavaScript rendering as part of its indexing pipeline. OpenAI separates automatic search discovery, potential training, and user-triggered fetches into three agents with independent controls. A visit from one agent does not prove that another agent can reach the same content.

Agent	Purpose	Published contract	Practical check
Googlebot	Google Search crawling and indexing	Google documents a crawl, render, and index pipeline. Its Web Rendering Service runs JavaScript with a recent Chromium version.	Use Search Console URL Inspection, inspect the rendered HTML, and confirm that scripts and data requests are crawlable.
OAI-SearchBot	Discovery for ChatGPT search features	OpenAI documents robots.txt controls, published IP ranges, and search eligibility. It does not publish a JavaScript-rendering guarantee.	Allow the OAI-SearchBot user-agent token when search inclusion is intended, permit its published IP ranges, and allow about 24 hours for robots.txt changes to propagate.
GPTBot	Content that may be used for model training	OpenAI separates GPTBot from its search crawler. A GPTBot rule is a training preference and does not control ChatGPT search inclusion.	Set the GPTBot user-agent token to the training policy you want. Test OAI-SearchBot separately when the goal is ChatGPT search visibility.
ChatGPT-User	User-triggered visits in ChatGPT and Custom GPTs	OpenAI says this agent is user-triggered, is not an automatic web crawler, and is not the control for Search inclusion.	Treat it as a separate live-fetch path. Verify status, edge access, and the returned content without inferring search eligibility from a visit.

OpenAI says sites that opt out of OAI-SearchBot will not appear as sources in ChatGPT search answers, though navigational links can still appear. It also says OAI-SearchBot and GPTBot preferences are independent. ChatGPT-User is a user-triggered agent and is not used to decide Search inclusion. These boundaries make a single “allow all AI” robots rule too vague for an intentional policy.

Compare the initial response with the rendered page

A browser screenshot proves what a person sees after scripts finish. A raw HTTP response proves what the server delivered before browser execution. A JavaScript SEO audit needs both views. The difference between them identifies content that depends on rendering, data requests, cookies, local storage, or a client-side route transition.

View one

Initial server response

Inspect the HTML returned by the public URL with no browser execution. This is the safest delivery contract for a crawler whose JavaScript behavior is undocumented.

View two

Rendered DOM

Inspect the page after scripts and network requests finish. Google Search Console's URL Inspection tool supplies Google's rendered view for an indexable URL.

Compare the same evidence in both views. A word-count diff alone is weak because navigation, cookie banners, and hidden UI can create noise. Pin the fields that answer the page's job.

Evidence	Pass condition
Status and final URL	The public URL returns the intended 200 response without an auth wall, challenge, or redirect loop.
Title and description	The initial response contains the canonical title and meta description for the route.
Main answer	The H1 and the text that answers the page's core question exist before browser-side data fetching.
Crawlable links	Important navigation uses ordinary links with href values and stable destination URLs.
Canonical and robots	The canonical points to the intended owner and the page does not carry an accidental noindex directive.
Structured data	JSON-LD appears in the response and agrees with visible copy, price, dates, and product facts.

Fix the rendering boundary for each framework

React controls the component model. The delivery decision comes from the framework and route. A Next.js page can be server-rendered, statically generated, incrementally regenerated, or heavily dependent on client execution. A React SPA can add pre-rendering or move public routes to a server-capable framework. Diagnose the response before applying a framework-wide label.

Next.js App Router

Safe delivery pattern: Keep public facts in Server Components. Add Client Components only where state, event handling, or browser APIs require them.
Common failure: A client component fetches the title, product explanation, pricing, or FAQ after hydration, leaving a thin initial response.
Fix: Fetch public data on the server, use metadata or generateMetadata, and pass only interactive state into client islands.

Next.js Pages Router

Safe delivery pattern: Use static generation, server-side rendering, or incremental static regeneration for indexable public routes.
Common failure: A useEffect or client data library supplies the entire page after a loading shell reaches the browser.
Fix: Move the first meaningful content into build-time or request-time rendering and reserve client fetching for live enhancements.

React SPA

Safe delivery pattern: Give every public screen a stable URL and pre-render or server-render routes that need search discovery.
Common failure: The server returns one app shell for every route, navigation uses fragments, and metadata changes only after JavaScript runs.
Fix: Add a rendering layer for public routes, use the History API, emit real links, and make route-specific metadata available in the response.

Next.js documents Server Components as the right home for static content, data fetching, and SEO-oriented elements. Client Components remain useful for state, event handlers, and browser APIs. The practical pattern is a server-delivered article, product description, price, FAQ, and schema with client-side controls nested inside it.

Foglift data: strong SEO scores can still hide extraction gaps

Foglift analyzed 854 Technical Audits and kept the latest eligible result for each of 194 distinct domains. Median SEO was 90/100, while median AI Readiness was 60/100. Among 165 domains with SEO scores of at least 70, 37 had AI Readiness below 50. That is 22.4% of the SEO-strong cohort.

The same sample found no structured data on 45 of 194 sites, content that was hard for AI systems to scan on 33, and a missing H1 on 25. These findings do not isolate React, Next.js, or JavaScript rendering as the cause. They show why a healthy conventional SEO score cannot stand in for a direct inspection of server-delivered facts, page structure, and extraction signals.

194

Distinct domains in the latest-result sample

90 vs 60

Median SEO and AI Readiness scores

22.4%

SEO-strong sites with AI Readiness below 50

Sites with no structured data detected

Read the sample construction, issue normalization, score distribution, and limitations in Foglift's AI Readiness study across 194 websites.

Check crawler policy and page readiness now

The free Foglift AI crawler access checker reviews the robots.txt policy for 28 crawler identities, including Googlebot, GPTBot, OAI-SearchBot, ClaudeBot, and PerplexityBot. The free Technical Audit checks one public page across SEO, AI Readiness, performance, security, and accessibility.

A side-by-side Crawler View for raw and rendered evidence is coming. Until it is live, compare the response and rendered DOM with browser tools, use Search Console for Google's rendered view, and use the access checker for the published crawler policy. None of these checks guarantees indexing, ranking, retrieval, citation, or referral traffic.

Check AI crawler access and run the page baseline

Review the robots policy for 28 crawler identities, then run a Technical Audit on the exact public URL. The side-by-side raw and rendered Crawler View is coming.

Check AI crawler access Run a Technical Audit

Frequently asked questions

Is React bad for SEO?

React is not inherently bad for SEO. The risk comes from public content that exists only after browser-side JavaScript runs. Give important routes stable URLs and put their main text, metadata, links, and structured data in the initial response through server rendering or pre-rendering.

Is Next.js good for SEO?

Next.js supports static generation, server rendering, incremental static regeneration, and client rendering. Public pages are easiest to inspect when their important content and metadata are available on page load. Interactive controls can remain client components.

Can Google index JavaScript pages?

Yes. Google documents a crawl, render, and index pipeline and runs JavaScript with its Web Rendering Service. Rendering adds another dependency, so blocked resources, failed data requests, thin app shells, or non-200 responses can still prevent the expected content from being indexed.

Can ChatGPT read a JavaScript website?

OpenAI documents the purposes, robots controls, and IP ranges for OAI-SearchBot, GPTBot, and ChatGPT-User. Its crawler documentation does not promise JavaScript execution. Keep essential public facts in the server response, allow OAI-SearchBot when search inclusion is intended, and verify the exact returned content.

What is the difference between OAI-SearchBot, GPTBot, and ChatGPT-User?

OAI-SearchBot is the automatic crawler used for ChatGPT search inclusion. GPTBot gathers content that may be used to improve and train foundation models. ChatGPT-User performs some user-triggered visits and is not the automatic Search crawler. OpenAI states that the controls are independent.

How do I test whether crawlers can read my React page?

Compare the initial HTTP response with the rendered DOM. Check the status, final URL, H1, main answer, title, description, canonical, links, robots directives, and JSON-LD. Then inspect the page with Google Search Console and use Foglift's free AI crawler access checker to review the published robots policy.

What can Foglift test today?

Foglift's free AI crawler access checker reviews the robots.txt policy for 28 crawler identities, while the free Technical Audit checks one public page across SEO, AI Readiness, performance, security, and accessibility. A side-by-side raw and rendered Crawler View is coming. These checks do not prove provider-origin traffic or guarantee indexing, ranking, retrieval, or citation.

Sources and methodology

Google Search Central, Understand JavaScript SEO basics. Primary documentation for Google's crawl, render, and index pipeline and its server-rendering guidance.
Google Search Central, Fix Search-related JavaScript problems. Primary troubleshooting guidance for blocked resources, rendering failures, and URL Inspection.
Next.js, Rendering Strategies. Framework documentation for static generation, server rendering, incremental regeneration, and client rendering.
Next.js, use client directive. Framework guidance for the Server Component and Client Component boundary.
OpenAI, Overview of OpenAI crawlers. Primary documentation for OAI-SearchBot, GPTBot, ChatGPT-User, robots controls, and published IP ranges.
Anthropic, web crawler controls. Primary documentation for Anthropic's purpose-separated bot identities and robots.txt behavior.
Foglift Research, AI Readiness Across 194 Websites. The report publishes the 854-audit population, latest-domain sampling method, issue normalization, aggregate results, and limitations.

Fundamentals: Learn about GEO (Generative Engine Optimization) and AEO (Answer Engine Optimization) (the two frameworks for optimizing your content for AI search engines).