SEO for React Apps

SEO for React Apps

React is a great tool when it comes to building web applications. It makes the development process very flexible and scalable, and allows frontend developers to build world-class software. While it has a lot of advantages, it also has some disadvantages:

It has a steep learning curve
In 2024, practically forces you to use Functional Programming over Object Oriented Programming
Bad for Search Engine Optimization

For this article, we’ll focus on the 3rd issue and discuss the causes and solutions for the SEO problem.

Why is React bad at SEO:

Before explaining that, let’s have a quick refresher on how React works on a fundamental level.

Unlike traditional websites where HTML is directly served by a backend server. In React the backend serves a JS bundle, and not plain HTML. The JS bundle is then executed on the frontend, which generates the HTML. So when you make a request to the server that’s hosting your site, initially it doesn’t provide HTML, instead, it provides JS.

As you can imagine when Google or other search engines are scraping your site for HTML, that they use to rank your website, they only get a Javascript bundle, which they can’t use to rank your site.

Solution:

Along with the JS bundle, also serve the initial HTML for your website.

You can manually set up everything yourself by implementing Server Side Rendering(SSR) on your React app, or you can use libraries like Next.js or Remix, which supports SSR. I recommend using a library, as setting up SSR is very complicated.