Why Client Side Rendering (React/Angular) is Bad for SEO and Kills Organic Traffic

After coming across 2 React sites that are struggling for organic traffic I wanted to do a LI post about them. But soon realized there's a lot to covers. So I wrote this article explaining how client side rendering sites like React based ones are killing your organic traffic.

Client Side Rendering (CSR) vs Server Side Rendering (SSR)

First, a quick explainer. CSR and SSR are two different ways websites use to show webpages in a users browser.

• CSR - Browser dynamically renders the webpage using the JavaScript bundle sent by the web server and display it to the user
• SSR - Web server sends the fully rendered HTML (webpage) to the browser and the browser simply displays it

Search engines claim they can render HTML and read the content. And if you follow the best practices of client side rendering you definitely increase your chances of discovered and indexed by crawlers.

However, even well implemented CSR setup run the risk of wrong content getting into the index. If you wan to get into technical details check out this article at Google Search Central.

Why Client Side Rendering is Bad for SEO

There are quite a few reasons why CSR is bad for SEO.

1/ Delayed for Partial Indexing (No pages in search engines or pages with wrong information in search engines)

With CSR crawlers see the initial minimal HTML with JavaScript (JS) and then queues it for JS rendering. The rendering can happen in seconds, minutes or not happen at all.

This means your website updates will take longer to show up in search engines. For time sensitive things like jobs, news and ecommerce listings this can be disastrous.

One of the React websites I came across that inspired this post was a vehicle listing website. New listings were added everyday but none of them were showing up in search because crawlers couldn't see the rendered content.

So if you're running a website where urgent indexing is important then you really have to make sure your CSR is working as expected and your content in on the index.

2/ Poor Internal Linking Stopping Page Discovery (Search engines doesn't even know your pages exist)

With CSR internal links are also visible after the content is generated. For most websites most number of external links point to the home page. Hence, internal links are critical for crawlers to discover other pages of your website.

In the previous vehicle listing website I mentioned there were thousands of listings but only a few pages were actually found in the index. All the collections they created to group vehicles were not even on the index.

3/ Core Web Vitals Suffer ( Search engines think your website offers a poor user experience)

This one is ironic because one of the advantages of CSR is highly interactive websites after the initial load.

However if you have large JS bundles it can impact Core Web Vital factors like Largest Contentful Paint (LCP) or Interaction to Next Paint (INP).

You might not understand the technical terms but from a business perspective it sends a signal to search engines that you have a slow loading website with a poor user experience and your rankings will suffer because of it.

4/ Issues with Header Tags and Meta Data ( Your optimized SEO titles and meta tags are not getting picked up)

Again, since header tags and meta data are added via the JavaScript there is a high chance that they won't be detected at all.

Even worse, your home page meta data might be detected instead and you might run into duplicate title or content issues.

5/ Crawl inefficiency ( Some pages will not be crawled at all since the crawl budget is exhausted)

As shown in the earlier graph, the crawler has to do some extra work to crawl CSR websites. It not only have to fetch the HTML, it has to queue the JavaScript for rendering and then crawl the rendered output.

Website don't have an infinite crawl budget and sending out multiple requests to for a single page eats into this budget. For a simple website with 10-20 pages this won't be a huge problem. But for a website with 1000s of pages with new pages added everyday this can be a huge issue with most of the content unlikely to be crawled and indexed.

How to Optimize Client Side Rendering Websites for SEO

The first step is to identify whether you need client side rendering in the first place. CSR is great if you have dynamic content.

Dynamic content are content that changes based on user, user behavior or interactions. Think dashboards, personal feels, interactive games.

If your website doesn't have dynamic content then it is much better to switch to a server side rendering solutions and get the SEO advantages.

If you still want to go for a CSR solution consider the following.

Use a Hybrid Approach

Understand which pages are static and which pages changes dynamically. Use SSR for the static pages and use CSR only for the dynamic pages.

One of the sites that prompted this article was a travel website which had mostly static pages for destinations and an interactive map and a search engine which changes based on user input and activity.

Instead of rendering everything as CSR they can split static pages and render then on the server. That way they get the SEO benefit for the static pages and keep the interaction necessary for the map and the search.

Similarly consider how your site should behave and come up with a hybrid approach based on the your page structure.

Reduce the JavaScript Load

CSR lives and dies by the performance of the JavaScript code.

There are many ways to improve the JS performance with code splitting and lazy loading the most obvious ones.

There are many development technique you can use to do this. If you're a business owner do some research and push your developers to optimized it as much as possible.

Properly Handle Internal Links and Meta Tags

Instead of using JavaScript to navigate to page make sure to show the correct internal links in the rendered code.

Same for HTML tags. Instead of dynamically rendering them use the available libraries and pre render them and make the available in the initial HTML.

Conclusion: CSR is Not Advisable if SEO is a Priority

With so many things that can go wrong SEO wise, CSR is not recommended if you're going to rely heavily on search engine traffic. However, if there is a necessary reason for you to use CSR then make sure to the fully optimize it.