React is one of the most popular JavaScript frameworks in the world. Next.js is built on top of React. So why does the choice between them matter so much for SEO? Because how your content reaches the browser — and how Google reads it — is completely different between the two. This guide explains the distinction without assuming you have a computer science degree.
Table of Contents
CSR vs SSR Explained Simply
Two terms come up constantly in this debate: Client-Side Rendering (CSR) and Server-Side Rendering (SSR). Here's what they actually mean.
Client-Side Rendering (CSR) — what plain React does by default: When a user visits your website, the browser receives a mostly empty HTML file. It then downloads a large JavaScript bundle and runs it to build the page content right there in the browser. The user sees a blank or loading screen first, then the content appears. Essentially, the browser does all the work.
Server-Side Rendering (SSR) — what Next.js does by default: When a user visits your website, the server builds the complete HTML page — content, headings, text, images — and sends the fully formed page to the browser. The user sees the content almost immediately, and the browser just displays what it already received. The server does the heavy lifting before anything reaches the user.
Next.js also supports Static Site Generation (SSG), where pages are pre-built at deploy time and served as static HTML. This is even faster than SSR for pages where the content doesn't change per request.
How Google Crawls React vs Next.js
This is where SEO enters the picture. When Googlebot visits a webpage, it reads the HTML content to understand what the page is about and index it accordingly.
With a plain React (CSR) site, Googlebot arrives and initially receives that same near-empty HTML shell. Google has a second wave of crawling called "second-wave indexing" where it eventually renders the JavaScript — but this can take days or even weeks after the first crawl. During that delay, your page may be indexed as a nearly blank page with no real content.
With Next.js (SSR or SSG), Googlebot receives the complete HTML immediately — all your headings, body text, meta tags, and structured data are right there in the first response. There is no rendering delay. Google can index the full content in the same crawl.
This difference matters enormously for pages that rely on organic traffic. A product page, a service page, a blog post — any content you want to rank needs to be readable by Googlebot on the first pass. Next.js makes this happen reliably. Plain React doesn't guarantee it.
SEO Problems with Plain React
If you are using create-react-app or a similar plain React setup without server-side rendering, here are the specific SEO issues you are likely to encounter:
- Delayed indexing: Your content may not appear in Google search results for days or weeks after publishing, even if Google crawls the URL promptly.
- Thin page signals: Until JavaScript renders, Google may see your page as having minimal content, which can hurt your rankings in competitive queries.
- Meta tag issues: Dynamic meta titles and descriptions set via JavaScript may not be picked up correctly during the first crawl wave.
- Slow LCP (Largest Contentful Paint): Because content loads after JavaScript executes, your Core Web Vitals scores can suffer — which is a direct ranking factor.
- Social sharing problems: Facebook, LinkedIn, and WhatsApp previews use open graph tags from the initial HTML. CSR sites often show blank previews because the OG tags aren't in the initial HTML response.
It is worth noting that Google has improved its JavaScript rendering over the years. But "improved" doesn't mean "reliable". For any website where SEO matters, depending on Googlebot's JavaScript rendering capability is a risk you don't need to take.
Next.js SEO Advantages
Next.js was built with SEO in mind, and the framework provides several concrete advantages over plain React:
- Built-in HTML generation: Every page exports as proper HTML with content visible to crawlers immediately — no rendering delay.
- File-based routing: Clean URL structures are easy to implement. Each file in the pages or app directory becomes a URL, making sitemap creation and URL management straightforward.
- Head management: Next.js provides a
<Head>component (and Metadata API in the App Router) to set title tags, meta descriptions, canonical URLs, and structured data per page easily. - Image optimisation: The built-in
<Image>component automatically handles WebP conversion, lazy loading, and responsive sizing — all of which improve Core Web Vitals scores. - Incremental Static Regeneration (ISR): You can revalidate static pages in the background without a full redeploy, keeping content fresh while maintaining the speed of static HTML.
- API routes: Server-side logic can live inside the Next.js project, reducing the need for separate backend infrastructure for many use cases.
Performance Differences in Practice
Beyond SEO, the two frameworks differ significantly in real-world performance, especially for users on slower connections — which is a reality for a significant portion of Indian internet users.
A typical plain React SPA (single-page application) ships a JavaScript bundle of 200–600 KB or more before any content appears. On a 4G connection in tier-2 cities, this can mean a 3–6 second wait before users see anything meaningful. This directly increases bounce rates.
A Next.js SSR or SSG page sends pre-built HTML, which browsers parse and display faster than executing JavaScript. The Time to First Byte (TTFB) and First Contentful Paint (FCP) are typically much better, which contributes to better Core Web Vitals and a better user experience across all device types and connection speeds.
When deployed on a CDN-backed hosting platform like Vercel or Netlify, Next.js static pages can serve from edge nodes close to the user — further reducing latency for visitors across India.
When Plain React Is Fine
There are genuine cases where plain React (without Next.js) is the right choice:
- Internal dashboards and admin tools: If the application is behind a login and not indexed by search engines, CSR is perfectly fine. Most SaaS dashboards, CRM tools, and internal portals work well as React SPAs.
- Highly interactive web apps: If your product is essentially a browser-based application — think a design tool, a data visualisation platform, or a complex form wizard — React's client-side model makes sense.
- Prototypes and MVPs: When speed of development matters most and SEO isn't a concern at the initial stage, create-react-app or Vite + React is fast to get started with.
The rule of thumb is simple: if the page needs to rank on Google, it needs server-rendered HTML. If SEO doesn't apply to the page, React alone is a reasonable choice.
When to Choose Next.js
Next.js is the right framework when:
- You are building a marketing website, service website, blog, or content-heavy platform that needs to rank in Google.
- You are building an eCommerce store where product pages and category pages need to be indexed and ranked.
- You need fast initial page loads and good Core Web Vitals scores to compete in your industry.
- You want a unified codebase for both the frontend and lightweight backend logic (API routes).
- You are building on top of a headless CMS like Contentful, Sanity, or Strapi — Next.js integrates well with all of them.
What This Means for Indian Projects
For most Indian businesses commissioning a website — whether a startup in Bengaluru, a service firm in Delhi NCR, or an eCommerce brand anywhere — the website's primary goal is to generate leads or sales through organic search. This means SEO performance isn't optional; it's central to ROI.
If a developer proposes building your new website in plain React and mentions nothing about server-side rendering, ask them specifically how Googlebot will index the content. If they can't give a clear answer, that's a red flag.
Next.js is now mature, well-documented, and has an enormous ecosystem. For any external-facing website that needs organic visibility, it's the responsible default choice over plain React. The added complexity it introduces — which was a genuine concern a few years ago — is now largely abstracted away by the App Router and Vercel's deployment infrastructure.
If you are working with a freelance web developer or agency in India, the conversation shouldn't be "React or Next.js?" It should be "which rendering strategy does this specific page type need?" — and Next.js gives you the flexibility to answer that question correctly per page.
Need an SEO-friendly website built with the right technology?
I've migrated React SPAs to Next.js and seen +280% organic sessions in 90 days from fixing the technical foundation. If you're on a client-side React app and wondering why your content isn't ranking — that's probably why. Happy to take a look.