Is ReactJS Good for SEO? Pros & Cons Explained

ReactJS – often referred to as React – is an open-source JavaScript framework. Its main use is to build complex user interfaces for web applications with significantly less code than would be required from vanilla JavaScript. It was developed by Facebook and is still maintained and widely used to this day.

As a result of its increasing popularity, many websites are built using ReactJS. While this approach has its pros and cons, today we are focusing on a major one: SEO.

You’ve likely already read the title, so you know that we’ll be exploring whether React is a suitable option for building websites when SEO is a main consideration. Is a ReactJS site the golden egg to drive your site up the rankings, or is it better to employ an alternative approach (and stick to a WordPress frontend)?

Let’s investigate!

A Closer Look at ReactJS

ReactJS, as a standalone framework, has major benefits from a usability perspective. However, arguably due to its client-side rendering approach, it does have some downsides too.

Client-side rendering is when the output of a web page happens in the browser instead of the server. For you, this means that your browser processes and renders each web page when it receives the necessary JavaScript and converts it into HTML.

Don’t worry if this sounds a bit confusing. We have a client-side rendering flow chart that explains it much better:

1. Server sends code to browser (Loading wheel)
2. Browser downloads the React code from link in the code (Loading wheel)
3. Browser executes the React code (Loading wheel)
4. Page is now viewable and interactive

On the one hand, this is great for complex interfaces with real-time data and lots of interactivity, for example; stock broker charts, auction sites or Facebook!

Effectively, this method of rendering isn’t great from a foundation SEO perspective. It means the source code won’t have any useful or readable content in it, there will just be a <div> followed by a <link> to the JavaScript. Your browser needs to read this script before it’s able to render the readable content for your web page.

Why is Client-Side Rending a Problem for SEO?

The main SEO problem with client-side rendering is that Google may not notice your pages are using a JavaScript framework such as ReactJS.

Google, over the last few years, has massively improved on this issue and outlines the way it processes JavaScript sites here with its new evergreen version of Chromium (AKA Googlebot). It is designed to read websites that use client-side render, however, is leaving Googlebot to render content the right strategy? And what about other search engines that are not so smart?

The risks are indexing delays or worse, unindexed websites, which basically means your pages will struggle to rank or wont exist on Google Search.

Google is well aware of this and actually outlines that server-side or pre-rendering is way better for SEO than client-side. This doesn’t mean ReactJS on its own is terrible for websites – there are instances where this still works perfectly fine. Primarily, it’s when SEO is not a top priority, like when you have content locked behind a password screen.

To further add to the downsides of React-only web pages, there’s an issue when sharing content on social media. Because the meta titles have not been populated server side, social networking sites will share your content without titles, descriptions or images. In turn, you lose out on lots of clicks, meaning you don’t drive traffic to your site. As any search engine optimisation buff knows, sites with lots of traffic tend to be bumped up the rankings because they’re deemed authoritative. So, you miss out on this little SEO boost too.

ReactJS with Added Server-Side Rendering

At this point, you’re probably thinking to forget ReactJS altogether. When used alone, it certainly struggles to have a positive impact on your search engine performance.

However, there’s an extra layer that comes in and supercharges ReactJS, turning it into an SEO monster!

It’s called NextJS, that sits on-top of React with tonnes of features thrown in. Developers can still build projects with ReactJS, but this time you get server-side rendering. For business owners, this is game-changing!

Server-side rendering differs from client-side rendering in that you’re not responsible for rendering all the web pages via your browser. Instead, pages are rendered on the server before any visitors to your site open their browser. The full HTML is generated and this source code is sent to the browser.

Again, we have a nice server-side rendering flow chart that details the exact process (you should see how much simpler this is than with client-side rendering):

1. Server sends code to browser (Loading wheel)
2. Browser downloads the react code from link in the code (Loading wheel)
3. Browser executes the react code (Loading wheel)
4. Page is now viewable and interactive

Why is ReactJS with Server-Side Rendering Better for SEO?

Look, server-side rendering isn’t a new approach and has been used via PHP for a very long time. Nevertheless, the advantage of utilising JavaScript with this rendering flow is that it’s easier to scale and provides a far superior user experience. Modern PHP websites struggle when there are lots of pages, but JavaScript ones are able to process and render pages easier, sending them to search engines.

If you’re looking for a perfect score on your Core Web Vitals too, ReactJS is likely the answer.

Plus, as mentioned before, Google literally recommends a server-side rendering approach as it makes it easier for bots to find pages at their first pass. This means your website is easier to index, so it has a better chance of ranking highly.

ReactJS With Server-Side Rendering & Caching – The Best for SEO

But wait, there’s yet another layer to the ReactJS SEO saga. NextJS introduces caching to this framework which takes it to a whole new level.

Normally, the cache would be a whole page. With JavaScript, every small element can have a set of cache rules. For example, your headers and footers remain in cache for 24 hours while a blog post is in cache for 5 days. This creates some significant benefits that take SEO to new heights and can help your website surge up the rankings.

For a better breakdown of how server-side rendering with cache works, check out our flow chart here:

1. Server sends rendered html to cache layer (could be a CDN, could be an edge server etc)
2. CDN sends html to browser (Fast)
3. Page is now viewable and interactive

Why Server-Side Rendering with Cache is the Best SEO Approach

Caching for websites improves load speed. It’s a mechanism that reduces the dependency on a server and database to fetch and render data. In simple terms, it’s a hidden area that stores the rendered content in little files instead of using the server to re-fetch that information.

Ultimately, using cache will make a website much faster.

In the context of ReactJS website and SEO, server-side rendering with caching is unprecedented.

NextJS can store parts of your website in cache which reduces the burden on servers. They no longer need to continuously render content that never changes. As a consequence, the server has more CPU power to deal with all the time. When your traffic levels increase, it’ll mean the server is capable of maintaining high speeds without crashing or becoming painfully slow.

Moreover, NextJS also uses the cache to ‘chunk’ CSS and JavaScript files. This means each page will only load JavaScript and CSS for that specific page. Traditional websites often load EVERYTHING – even when it’s not being used.

For example, eCommerce sites usually have lots of extra frontend code, and none of it gets used on the main parts of the website. However, traditionally, this still gets loaded, even though it’s only used in the checkout.

What does this mean? It means websites are slow. Thanks to NextJS and its superb caching, your website will be incredibly fast and can pass all Lighthouse tests with zero effort.

A fast website is essential for SEO as Google penalises sites that fail these tests and are too slow. Why? Because it provides a terrible experience for the user.

Users wont visit sites that take ages to load and are really laggy. The extra speed you gain with NextJS and server-side rendering ensures this won’t happen on your own website!

Is ReactJS Good for SEO?

After looking at all the information above, there are some clear pros and cons of ReactJS from an SEO perspective. When used alone, it’s not the most optimal approach if you want to climb the search rankings. In fact, we don’t recommend running a website solely on ReactJS if that’s your goal.

Having said that, when combined with server-side rendering through tools such as NextJS, it becomes a super powerful SEO asset. Your pages are easier to find and index and the inclusion of caching also makes your sites load faster, so you will see ranking improvements.

Arguably the biggest SEO problem is site indexing. If Google can’t find or index your site properly, you’ll never rank well in search results.

If you need help with search engine optimisation, or development for NextJS websites, please don’t hesitate to get in touch with us today.