DEV Community

Cover image for Why your React app is invisible to Google (and how I fixed it)
Adarsh
Adarsh

Posted on

Why your React app is invisible to Google (and how I fixed it)

Modern frontend tools like React are amazing for building fast, interactive UIs.

But there’s one problem I kept running into:

👉 SEO.

I built a React app that looked perfect in the browser.

But when I checked the actual HTML response, this is what I saw:

<div id="app"></div>
Enter fullscreen mode Exit fullscreen mode

That’s when it clicked.

Search engines don’t always execute JavaScript the same way a browser does.

So even though the UI renders perfectly for users, crawlers may see almost nothing.


The usual options

To fix this, you typically have to:

  • Switch to something like Next.js
  • Set up server-side rendering (SSR)
  • Use complex prerendering tools

All of these work… but they add complexity.


What I wanted instead

Something simple:

  • Works with existing React/Vite apps
  • No framework migration
  • Minimal setup
  • Outputs real HTML (not JS-dependent)

So I built ReviJs

ReviJs is a CLI tool that prerenders your SPA into SEO-friendly static HTML.

You just run:

npx @revijs/core
Enter fullscreen mode Exit fullscreen mode

And your output goes from:

<div id="app"></div>
Enter fullscreen mode Exit fullscreen mode

to something like:

<h1>Get started</h1>
Enter fullscreen mode Exit fullscreen mode

Now search engines can actually read your content.


Why this approach?

Instead of changing how you build apps, ReviJs works on top of your existing setup.

  • No SSR setup
  • No framework lock-in
  • Just static output that works

Final thoughts

Modern frontend is great for users, but sometimes not for crawlers.

ReviJs is my attempt to bridge that gap — keeping things simple while making apps discoverable.

Still early, but it’s already solving a real problem for me.

Would love your feedback 🙌

Npm
GitHub

Top comments (0)