"Our developer built the website in React, it looks great, but Google shows only the home page." We hear some version of this regularly from founders. Meanwhile, other businesses run large React-based websites that rank well for thousands of keywords. Same library, very different results.
The difference is almost never React itself. It is how the pages are rendered - where and when the HTML is produced. Once you understand that one idea, you can ask your development team exactly the right questions.
The core problem: what does Google receive first?
When someone (or Googlebot) opens a web page, the server sends back HTML. What is inside that HTML decides a lot.
- With a classic single-page application (SPA) built with plain React, the server often sends an almost empty HTML file with a single div and a large JavaScript bundle. The browser downloads and runs the JavaScript, and only then does the content appear.
- With server-side rendering (SSR) or static site generation (SSG), the server sends HTML that already contains the headings, text, links and metadata. JavaScript then "hydrates" the page to make it interactive.
Google has said for years that it can render JavaScript, and it does. But rendering is a separate step that can be deferred, JavaScript errors can stop content from appearing, and not every crawler that matters to you - Bing, social media link previews on WhatsApp, LinkedIn and Facebook, and various AI search tools - renders JavaScript as thoroughly. If your important content and links exist only after JavaScript runs, you are adding risk for no benefit.
The four rendering approaches, compared
| Approach | How it works | SEO strength | Best for |
|---|---|---|---|
| Client-side rendering (SPA) | Browser builds the page from JavaScript | Weakest - depends on rendering | Dashboards and apps behind login |
| Server-side rendering (SSR) | Server builds full HTML on each request | Strong | Pages with frequently changing or personalised data |
| Static site generation (SSG) | HTML built once at deploy time | Strong and very fast | Blogs, service pages, documentation |
| Incremental static regeneration (ISR) | Static pages that refresh in the background on a schedule or on demand | Strong and fast | Large catalogues, listings, CMS-driven sites |
Next.js supports all four, and you can mix them per page. A product site might use static generation for marketing pages, ISR for thousands of product pages that update when stock changes, SSR for search results, and client-side rendering inside the customer dashboard.
Why Next.js became the default for SEO-sensitive React sites
The React team itself now recommends starting new projects with a framework rather than a bare setup, and Next.js is the most widely used of those frameworks. For SEO it gives you, out of the box:
- Server rendering and static generation per route.
- A metadata system for titles, meta descriptions, canonical URLs and Open Graph tags on every page.
- File-based routing that produces clean, readable URLs.
- Image optimisation that serves correctly sized, modern-format images and helps avoid layout shift.
- React Server Components, which keep a lot of code on the server and reduce the JavaScript sent to the phone.
- Straightforward generation of sitemap.xml and robots.txt.
None of this guarantees rankings - content, relevance, links and reputation still decide that - but it removes the technical obstacles.
Core Web Vitals: where React sites often slip
Google uses Core Web Vitals as part of its page experience signals. The three metrics are:
- Largest Contentful Paint (LCP) - how quickly the main content appears.
- Interaction to Next Paint (INP) - how quickly the page responds when someone taps or clicks. INP replaced First Input Delay in 2024.
- Cumulative Layout Shift (CLS) - how far the layout jumps around while loading.
Heavy SPAs commonly struggle with LCP and INP on mid-range Android phones, which is what a large share of Indian users browse on, often over patchy mobile data. Shipping less JavaScript, rendering on the server, lazy-loading below-the-fold components and controlling third-party scripts (chat widgets, multiple analytics tags) make a visible difference.
A technical SEO checklist for any React website
Use this list with your developer or agency, whether you are building new or auditing an existing site.
| Check | What good looks like |
|---|---|
| View page source (not inspect) | Headings and body text are present in the raw HTML |
| Unique title and meta description | Set per page, not one title for the whole site |
| Real links | Navigation uses proper anchor tags with href, not click handlers on divs |
| Clean URLs | Readable paths, no hash-based routing like /#/services |
| Status codes | Missing pages return a real 404, not a 200 with "not found" text |
| Canonical tags | Each page declares its preferred URL |
| Structured data | JSON-LD for Organisation, LocalBusiness, Breadcrumbs, FAQs and Articles where relevant |
| Sitemap and robots.txt | Generated automatically and submitted in Search Console |
| Images | Descriptive alt text, sized correctly, modern formats |
| Mobile performance | Core Web Vitals in the "good" range in Search Console field data |
| Redirects | 301 redirects from old URLs after any redesign or migration |
Two items deserve special attention.
"Soft 404s" in SPAs
A common SPA mistake: every URL returns HTTP 200, and the React app shows a "page not found" message for wrong URLs. Google may treat these as soft 404s, and it wastes crawling. A framework with server rendering can return proper status codes.
Links that are not links
If menu items are buttons that change the route in JavaScript, crawlers may not discover your inner pages. Use real anchor elements - Next.js's Link component renders them correctly.
Already have a React SPA? Your options
Option 1: Pre-rendering as a stop-gap
Tools can generate static HTML snapshots of key routes at build time. This helps quickly but becomes fragile as the site grows.
Option 2: Move public pages to Next.js, keep the app as it is
Many businesses split their product: the marketing site, blog and landing pages move to Next.js, while the logged-in application stays as a client-side React app. This is often the fastest route to better SEO with minimal risk.
Option 3: Migrate the whole application to Next.js
Because Next.js is React, most components can be reused. Routing, data fetching and some browser-only code need reworking. Done route by route, the migration can happen without a big-bang relaunch.
Whichever option you choose, protect existing rankings: keep URLs the same where possible, map every changed URL to a 301 redirect, carry over titles and descriptions, and monitor Search Console closely for a few weeks after launch. Our SEO services team usually works alongside developers during such migrations.
Hindi and regional-language pages
Many Indian businesses serve customers in Hindi or other regional languages alongside English. If you publish language versions of your pages, a React site needs the same care as any other:
- Give each language its own URL, for example /hi/ for Hindi, rather than switching text with JavaScript on the same URL.
- Add hreflang tags so Google understands which version to show to which user.
- Translate titles, meta descriptions and structured data too, not just the body text.
- Make sure fonts render Devanagari and other scripts clearly on low-end phones.
Next.js supports internationalised routing patterns that make this straightforward to set up and maintain.
Questions to ask before you approve a React website build
- Which pages will be server-rendered or statically generated, and which will be client-side?
- How will titles, descriptions, canonicals and structured data be managed - can my team edit them in a CMS?
- How will you measure Core Web Vitals before launch?
- Will a sitemap and robots.txt be generated automatically?
- If this is a redesign, where is the redirect map?
Key takeaways
- React is not bad for SEO; client-side-only rendering is the weak point.
- Google can render JavaScript, but server-rendered HTML is more reliable for every crawler and every link preview.
- Next.js lets you mix static, server and client rendering page by page.
- Watch Core Web Vitals on real mid-range phones, not just on a developer's laptop.
- Use real links, real 404s, unique metadata and structured data on every important page.
- Plan redirects carefully when migrating an existing site.
Wondering why your React site is not showing up on Google, or planning a new one that must rank? Book a free consultation and we will review your setup and suggest a practical plan. Explore our React JS development and website development services to see how we build fast, search-friendly sites.
