SEO Pros and Cons of Using React JS

What Is React JS?

React is a JavaScript library for building user interfaces. It was developed by Facebook and is often used for building single-page applications and mobile applications.

React allows you to create reusable UI components. It uses a virtual DOM (a JavaScript representation of the actual DOM) to optimize updates to the user interface. This means that when the state of a component changes, React will update the DOM efficiently, minimizing the number of DOM manipulation operations required.

React uses a declarative approach to programming, which means that you describe what you want the UI to look like, and React takes care of the actual rendering. This can make it easier to reason about your code and improve the development experience.

React also has a strong ecosystem of tools and libraries that make it easy to develop applications with React, such as React Router for routing, Redux for state management, and more.


Cons of Using React JS:

  • Rendering Issues - Other search engines can’t support rendering Javascript but Google actually does a good job at it recently.

  • Slows Page Speed Down - It can slow your page speed down because rendering Javascript is intensive on the CPU. This will also mess up your core web vitals on the entire site. However, there is a workaround for this by implementing Server Side Rendering (SSR) or Static Site Generation (SSG).

  • Status Code Errors - It doesn’t correctly report status codes like 301 redirects or 404 statuses.

  • Hashed URL Issues - You can’t use hash URLs because React does not support it. For example, www.orangeseo.net/#/react-javascript.

  • Not All Content Will Be Crawled - Content added to the DOM will not be seen by search engines. This type of lazy loading feature might seem helpful from a page speed perspective but google can’t crawl content on your page this way. There are workarounds for this such as accordions, modals, and tabs.

  • Slower indexing of pages - React employs an app shell model by default which does not contain HTML. This approach means that Googlebot detects an empty page during the first pass. The content is seen by Google only when the page is rendered. When dealing with thousands of pages, this will delay the indexing of content.

  • Meta Data Issues - React renders all the content, including meta tags, on the client. Since the app shell is the same for the entire website/application, it may be hard to adapt the metadata for individual pages and applications.

  • No Sitemap for React - React does not have a built-in way to generate sitemaps. If you are using something like React Router to handle routing, you can find tools that can generate a sitemap, though it may require some effort.

  • Single Page Apps - Unlike static and dynamic websites that generate files with HTML content that is easily understandable for Google, SPAs are dependent on JavaScript files that are not very good for SEO. The thing is that an HTML file has only several lines of code when it is sent back to the client side. This code is not enough for Google to understand the website's content and index the page. That is why Google has to wait until the JavaScript content downloads, which takes a relatively long time. For this reason, Google crawlers may simply leave the page without waiting for the content to load, considering it as a blank one. Nevertheless, this problem can be solved. 


Pros of Using React JS:

  • High Performance - React uses the virtual DOM concept, which works as a copy of the real DOM. All the changes caused by events or user interactions are handled by the virtual DOM first. Every action works on the tree structure to refresh itself. So, React helps you save time from repeating the recreation of the DOM tree for every change made to the application. It results in the high performance of the application. 

  • Static Web Apps - Such apps contain information that doesn’t often change (that is why they are called static).  For example, landing pages, corporate websites, and blogs. Static web apps are transferred to the user’s browser without any server-side changes. The information is kept in the form of HTML files. This type of web app is totally compliant with SEO since it quickly gives all the essential content an HTML file so that Google can index and rank pages easily.

  • Dynamic Web Apps - Such websites contain content that constantly changes. They generate data/pages in real time. For example, user-specific data, like a shopping cart in online shops or when you click “follow” on Twitter.  Per request, a respective response triggers from the server end and then reaches the client end. That is why Google has no problems with understanding and ranking dynamic pages. 

  • Flexibility - Compared to other frontend frameworks, the React code is easier to maintain and is flexible due to its modular structure. This flexibility, in turn, saves a huge amount of time and cost for businesses.

  • Usability - Deploying React is fairly easy to accomplish if you have some basic knowledge of JavaScript. In fact, an expert JavaScript developer can easily learn all ins and outs of the React framework in a matter of a day or two.

  • Reusable Components - One of the main benefits of using React JS is its potential to reuse components. It saves time for developers as they don’t have to write various codes for the same features. Furthermore, if any changes are made in any particular part, it will not affect other parts of the application.

  • It helps to build rich user interfaces - Today, the quality of the user interface in an application plays an important role. If the user interface is poorly designed, then it lowers the chances of an application to success. But, if an application has high-quality UI, then there are better chances that your users will love to use the app.

  • It allows writing custom components - React comes with JSX, an optional syntax extension, which makes it possible to write your own components. These components accept HTML quoting and make all subcomponent rendering a delightful experience for developers. Though there have been many debates on the matter of JSX, it has already been for writing custom components, building high-volume applications, and converting HTML mockups into ReactElement trees.


Conclusion:

As you can see from the list below there are many pros and cons of using React JS for SEO. But at the end of the day is about what you want to achieve for your website which should ultimately be your north star on if you should use React JS for your new website build.

From an SEO standpoint working with React application does add to the already long list of issues that the technical team will need to check off and work on to overcome these SEO hurdles. Fortunately, there are workarounds for most of the React JS SEO issues thanks to frameworks like Next.js and other applications.

The biggest issue we are going to face with using React is that Google is the only search engine that has the technology to properly crawl, index, and rank a React website. The other search engines such as Bing, Yahoo, DuckDuckGo, Baidu, and Yandex will not be able to crawl these types of websites currently. However, that does not mean that in the future they don’t advance their technology and eventually will be able to crawl Reach JS websites.  

The positive part of using React is that is a customizable and flexible framework that improves the user experience dramatically which is overall anyone’s goal when building a website or app. User experience is also a big ranking factor for Google so keep that in mind.

React can be a good choice to build an SEO-friendly website as long as you set it up correctly in the beginning. If not, there is a good chance you can lose rankings on Google and have pages go unindexed.