Is Your React SPA Hurting SEO? Signs and Fixes

React SPAs can be excellent products and terrible marketing engines at the same time. I’ve audited startups whose app dashboard was polished while their public homepage — also shipped as a client-rendered SPA — struggled to rank for the exact phrases they paid agencies to target.

If your growth plan depends on organic search, “we built it in React” is not an SEO strategy. This article is for founders and marketing leads who suspect the architecture itself is part of the ranking problem — and want clear next steps without drowning in framework dogma.

How SPAs Create SEO Friction

Search engines have improved at rendering JavaScript. Relying on that forgiveness is still a gamble when competitors ship HTML-first pages that paint content immediately.

Common SPA failure modes:

• Critical content appears only after JS hydration — crawlers and users wait; Core Web Vitals suffer
• Meta tags managed late or inconsistently — share previews and indexing signals get messy
• Client-only routing without solid prerender/SSR — soft 404s and thin initial responses
• One giant bundle for brochure pages — marketing URLs pay for app code they don’t need

Google may eventually see your content. Competitors who don’t make Google work for it still win the click-through and the LCP race.

Warning Signs Business Owners Can Spot

You don’t need to read React source to notice trouble:

1. View-source or “Disable JavaScript” shows an empty shell for key marketing pages
2. Social link previews show wrong titles/descriptions
3. Search Console coverage oddities on public URLs
4. Blog/resources underperform despite solid content investment
5. Mobile Lighthouse performance is poor on pages that are mostly text
6. Marketing wants landing pages weekly but engineering ships through the app release train

If paid landing pages convert and organic content does not — while competitors with simpler sites rank — architecture deserves suspicion.

Fixes Ranked From Lightest to Heaviest

1. Prerendering / SSR for public routes

If you must keep React, ensure public marketing routes are server-rendered or prerendered with correct status codes and metadata. Next.js is often the pragmatic migration path from CRA-style SPAs because it preserves React skills while fixing HTML delivery — see Next.js App Router Best Practices.

2. Split marketing site from the application

A pattern I recommend constantly:

• www → Astro or static/SSR marketing + blog
• app → React/Next product

Shared design tokens, separate performance budgets. Marketing pages stop shipping dashboard JavaScript. This aligns with the decision framework in Choosing a Frontend Stack for Your Business.

3. Content modeling for crawlable structures

Blogs, docs, and comparison pages need stable URLs, internal links, and HTML headings — not infinite-scroll walls with no indexable entry points. Astro content sites excel here; Real-World SEO Strategies for Astro Projects covers the implementation habits.

4. Full rebuild of the public site

When the SPA theme/plugin tangle can’t meet crawlability and CWV targets, rebuild public pages. Keep the SPA for the authenticated product if that’s where React shines.

”But Google Renders JavaScript Now”

True enough to create complacency. Rendering capacity, queue delays, and CWV competition still mean HTML-first marketing pages are easier to win with. If SEO is a growth channel — not a vanity metric — remove unnecessary JS dependency from content delivery.

Also remember: SEO is not only bots. Humans bounce from slow SPAs. Performance and SEO share a bloodstream — Common Frontend Mistakes That Hurt Website Performance lists patterns I keep removing from marketing SPAs.

Decision Guide

Situation	Lean toward
Product is the SPA; marketing is thin	Split sites; keep React for app
Marketing and app share one CRA shell	Next.js SSR/prerender or split
Blog is strategic growth	HTML-first framework + CMS
SEO is irrelevant; product is paid/sales-led	SPA may be fine for now

Be honest about channel strategy. Not every company needs organic. If you do, don’t make React loyalty the reason you lose.

What I Do on These Projects

When clients hire me for SPA SEO remediation, I typically:

1. Audit crawlability, metadata, and CWV on top URLs
2. Propose the lightest architecture change that unblocks growth
3. Implement SSR/prerender or an Astro/Next marketing frontend
4. Preserve URLs/redirects during migration
5. Leave a content workflow marketing can sustain

The goal is recoverable organic growth — not a fashionable rewrite.

Case Study: Empty Shell Homepage — San Francisco Seed

A San Francisco seed startup had a gorgeous product and a create-react-app marketing homepage. View-source showed a root div. Social previews were wrong half the time. They were investing in comparison content that never accumulated impressions.

Fixes, in order:

1. Prove the shell problem to the founding team with disabled-JS screenshots
2. Stand up an Astro www for homepage, pricing, and blog
3. Keep the React app on app.
4. 301 legacy paths; submit a clean sitemap
5. Re-brief content calendar once HTML-first delivery was boringly reliable

Organic wasn’t fixed by “more posts.” It started working when posts became pages search engines and humans could read without a JavaScript lottery. Migration hygiene parallels Migrating WordPress to Astro Without Losing SEO even when you’re leaving a SPA, not WordPress.

Case Study: Next Migration Without Splitting — Rotterdam

A Rotterdam scale-up wasn’t ready to split hosts. The SPA already lived in a monorepo with strong React talent. We migrated public routes to Next.js App Router with prerender/SSR for marketing URLs, metadata APIs for titles/descriptions, and a hard rule: no dashboard providers on brochure layouts.

It wasn’t as lean as Astro. It was dramatically better than client-only marketing routes — and it fit team constraints. Pragmatism beats purity when organic is on fire. App Router habits: Next.js App Router Best Practices.

Metadata Checklist (SPA Survivors)

If you’re stuck on a SPA short-term, at least stop the self-inflicted wounds:

• Unique titles/descriptions per public route at request time (or prerender)
• Canonical tags that don’t point everything to /
• Open Graph images that aren’t the product logo on every article
• HTTP status codes that match reality (real 404s, not soft 200 shells)
• XML sitemap of public URLs you want indexed
• robots rules that don’t accidentally blanket-block marketing

These won’t beat a lean content site forever — but they stop the bleeding while architecture change is scheduled.

Content Types That Suffer Most Inside SPAs

Content type	Why SPA friction hurts
Comparison / alternative pages	Need fast HTML + internal links
Blog / resources	Volume + CWV + share previews
Documentation	Deep IA; poor fit for app shells
Local / partnership pages	Thin JS apps rarely help
Pricing	Should be instantly readable

Product UI can keep React. These pages usually shouldn’t pay for it. Stack framing: Choosing a Frontend Stack for Your Business.

Measuring Whether the Fix Worked

Give leadership a two-horizon scoreboard:

Horizon A (2–4 weeks): crawlability — HTML content present, Search Console coverage stabilizing, social previews correct.

Horizon B (1–3 months): growth — impressions/clicks on strategic queries, mobile engagement on content URLs, CWV field status flipping toward Good.

Don’t promise rank-one miracle week. Do promise removal of architectural headwinds. Performance mistakes that compound SEO pain are catalogued in Common Frontend Mistakes That Hurt Website Performance.

FAQ Founders Ask Me

“Our agency said Google renders JS fine.”
For many sites, eventually. Competitors shipping HTML-first still win the UX and often the CWV contest. If SEO is a growth channel, don’t volunteer friction.

“Can we just prerender and keep one repo forever?”
Sometimes. Watch bundle boundaries — prerender that still hydrates a monster app may fix bots while punishing humans.

“When is a SPA fine for marketing?”
Sales-led motions with tiny public footprints, or temporary MVPs where paid acquisition is the only channel and pages are few. Revisit the moment content becomes strategy.

Internal Linking and IA After You Escape the Shell

Leaving a SPA doesn’t automatically create SEO-friendly information architecture. Plan:

• Hub pages that link to service/product/comparison URLs
• Blog posts that cite money pages with descriptive anchors
• Avoid orphan campaign pages with no path back into the site
• Stable category routes for resources — not only tag clouds inside client state

Astro content sites make these habits easier; implementation notes live in Real-World SEO Strategies for Astro Projects. Architecture without IA is a half-fix.

Redirect and Parity Checklist for SPA → Site Splits

When www becomes its own deployable:

• Inventory routes that had traffic, backlinks, or ads
• Map each to the new host with 301s
• Confirm titles/H1s don’t regress into generic template text
• Re-verify cookies/consent across www and app
• Update absolute URLs in ads, email footers, and partner directories
• Submit new sitemap; watch coverage for two weeks

I’ve cleaned up splits where only the homepage moved and /blog/* quietly 404’d for a month. Treat the cutover like a migration even when the brand stays the same — technical SEO launch checks still apply.

When Agencies Push “Just Add Next”

Agencies sometimes propose wrapping the SPA in Next as a silver bullet. Next helps when you actually use SSR/prerender and fix metadata. It fails when you lift-and-shift client routing habits into a new folder and call it modern. Ask for a before/after of view-source on /pricing and a performance budget — not a framework logo on a slide.

Sales-Led Teams: Still Audit Annually

Even if organic is secondary today, public pages accumulate: careers, partners, compliance, pitch microsites. Once a year, disable JavaScript on those URLs and see what’s left. If careers is an empty shell, recruiting share links and some crawlers will struggle — small surfaces, real costs. Architecture choices compound quietly until a funding announce or hiring spike makes them loud.

Conclusion

A React SPA hurts SEO when public content depends on client rendering, shares app bundles, or can’t ship content-speed pages that compete on Core Web Vitals. Fixes range from SSR to splitting marketing from product. The wrong response is ignoring Search Console while buying more content.

If your marketing site is trapped inside an application shell, let’s review your public URLs. Fixes often mean hire an Astro developer for a content split, or hire a Next.js developer when you keep React but need HTML delivery — before you spend another quarter on content that can’t climb. The same HTML-first move improves how assistants and crawlers read you, which is the realistic core of AI website optimization.

Teams escaping thin marketing shells sometimes rebuild from WordPress or CRA into App Router — that delivery path is a WordPress to Next.js migration when WP was the CMS and React is the product language.

Key Takeaways

• SPAs can rank, but HTML-first marketing pages usually compete more easily
• Empty shells, weak previews, and slow content pages are business-visible warning signs
• Prefer SSR/prerender or a separate marketing site before a panic rewrite
• Keep React for product UI; stop forcing brochure pages to pay app bundle costs
• Align architecture with whether organic search is truly a growth channel

---