Short answer: React can be good for SEO, but you have to make it that way. When you first install a client-side React app (SPA), it gives you an almost empty HTML shell and uses JavaScript to display the page. That’s not good for search engines or people who use slow devices. The good news is that React sites rank just fine as long as they are set up correctly with SSR/SSG, proper routing, metadata, and performance.
Why React Doesn’t Always Work Well with SEO
- Only Client-Side Rendering (CSR): The server sends back very little HTML. After JavaScript runs, the content and meta tags come in. Crawlers might miss or take longer to index.
- Late titles and meta tags: If the <title> and meta tags change after hydration, snippets may not always be the same.
- Hash routing or broken URLs: /#/page routes and query-only state can make it harder for search engines to find your site.
- Status codes and 404s: SPAs that always return 200 make it hard for crawlers to identify missing pages.
- Slow performance: Heavy bundles hurt Core Web Vitals, impacting rankings and user experience.
- Infinite scroll with no pagination: Crawlers might not find deeper content.
When React Is 100% Good for SEO
- Server-Side Rendering (SSR): The server sends back fully rendered HTML for each route.
- Static Site Generation (SSG): Pages are built ahead of time and deployed (great for blogs and docs).
- Hybrid or Incremental Approaches: Prebuild most routes and render others on demand.
- Clean URLs and correct status codes: Each page has a stable, crawlable path with proper responses.
- Better performance: Lean bundles, image optimization, and caching.
Rendering Models (Pick the One That Works for Your Site)
CSR (Client-Side Rendering)
- Pros: Easy to host, quick navigation after first load.
- Cons: Weak SEO unless you add pre-rendering.
- Best for: Dashboards and login-only areas.
SSR (Server-Side Rendering)
- Pros: HTML is ready on first byte; easier crawling; great for dynamic pages.
- Cons: More expensive and complex servers.
- Best for: Catalogs, news, location pages, and commercial content.
SSG (Static Site Generation)
- Pros: Fast, secure, cheap, SEO-friendly, easy to cache/CDN.
- Cons: Long build times for huge sites; content freshness must be planned.
- Best for: Blogs, documentation, and marketing pages.
ISR / On-Demand Revalidation (Hybrid)
- Pros: Combines SSR and SSG; scalable and fresh.
- Best for: Large content sites with frequent updates.
Framework Options in the React Ecosystem
- Next.js (SSR/SSG/ISR): Most SEO-friendly option, with routing, metadata APIs, and image optimization.
- Remix (SSR-first): Great for progressive enhancement and SEO defaults.
- Gatsby (SSG/DSG): Strong for content-heavy sites with prebuilt performance.
CRA / Vite + React (CSR): Fine for apps, but needs pre-rendering or SSR for SEO.
A Checklist for Technical SEO in React Sites
Structure and Routing
- Use clean, unique URLs (no hash routing).
- Return 404/410 for missing content and 301/302 for redirects.
- Maintain XML sitemaps and robots.txt.
Metadata
- Set title, meta description, and canonical per route (SSR/SSG).
- Add Twitter and Open Graph tags.
- Include structured data (Article, Product, FAQ) in server-rendered HTML.
Indexing and Content
- Ensure main content is in the first HTML load.
- Avoid rendering essential content only after hydration.
- Use crawlable pagination or “Load more” links.
Performance (Core Web Vitals)
- Code-split by route; lazy-load non-critical parts.
- Use responsive images, lazy-loading, and modern formats.
- Preload critical fonts and above-the-fold assets.
- Minimize third-party scripts.
Local & International SEO
- Add hreflang for multi-region sites.
- Render location pages server-side.
- Keep NAP consistent and use LocalBusiness markup.
Things You Shouldn’t Do
- SPA returns 200 for everything: Use real status codes.
- Meta tags only on the client: Titles/descriptions must be in the first HTML.
- Hash-based routing for public pages: Use /services/seo, not /#/seo.
- Endless scroll with no links: Provide crawlable pagination.
- Heavy first load: Large bundles harm LCP; optimize and split code.
Realistic Upgrade Paths
- If you have a CSR app today:
- Pre-render key landing pages, or
- Add a Node SSR layer for public routes, or
- Migrate to Next.js/Remix for SSR/SSG/ISR.
- If you’re already using Next.js/Remix:
- Audit metadata per route, Core Web Vitals, sitemaps, and structured data.
- Use Incremental Static Regeneration (or revalidation) for scale and freshness.
Final Decision
React doesn’t hurt SEO—it’s neutral. If you serve real HTML on first load, keep URLs clean, send metadata from the server, and ensure fast performance, your React site can rank as well as any other site. The framework you choose and how you configure it make all the difference.
