In the past five years, Google has innovated its handling of JavaScript content, but entirely client-side rendered sites introduce other issues that you need to consider.
It’s important to note that you can overcome all issues with React and SEO.
React JS is a development tool. React is no different from any other tool within a development stack, whether that’s a WordPress plugin or the CDN you choose. How you configure it will decide whether it detracts or enhances SEO.
Ultimately, React is good for SEO, as it improves user experience. You just need to make sure you consider the following common issues.
1. Pick the right rendering strategy
The most significant issue you’ll need to tackle with React is how it renders content.
As mentioned, Google is great at rendering JavaScript nowadays. But unfortunately, that isn’t the case with other search engines. Bing has some support for JavaScript rendering, although its efficiency is unknown. Other search engines like Baidu, Yandex, and others offer limited support.
SIDENOTE. This limitation doesn’t only impact search engines. Apart from site auditors, SEO tools that crawl the web and provide critical data on elements like a site’s backlinks do not render JavaScript. This can have a significant impact on the quality of data they provide. The only exception is Ahrefs, which has been rendering JavaScript across the web since 2017 and currently renders over 200 million pages per day.
Introducing this unknown builds a good case for opting for a server-side rendered solution to ensure that all crawlers can see the site’s content.
In addition, rendering content on the server has another crucial benefit: load times.
Affiliate marketing whatsapp number list has a simple premise. Just like Batman and Robin, vendors team up with affiliate marketers for mutual gain, making it a win-win for many business owners.
Load times
Rendering JavaScript is intensive on the CPU; this makes large libraries like React slower to load and become interactive for users. You’ll generally see Core Web Vitals, such as Time to Interactive (TTI), being much higher for SPAs—especially on mobile, the primary way users consume web content.
Overview of metrics' performance, including FCP, LCP, etc
An example React application that utilizes client-side rendering.
However, after the initial render by the browser, subsequent load times tend to be quicker due to the following:
Client-side rendering is not causing a full-page refresh, meaning the library only needs loading once.
React’s “diffing” algorithm only changes HTML in the DOM that has changed state—resulting in the browser only re-rendering content that has changed.
Depending on the number of pages viewed per visit, this can result in field data being positive overall.
Four bar graphs showing positive field data of FCP, LCP, FID, and CLS
However, if your site has a low number of pages viewed per visit, you’ll struggle to get positive field data for all Core Web Vitals.