Avoid client-side routing and rendering

Simone says: “Align with marketing goals, and make sure to challenge anything that is client-side routed or client-side rendered, especially within React web-based apps.”

What do the terms client-side routed and client-side rendered mean, and what impact does that have on SEO?

“To start with, I will just make sure that everyone is familiar with routing and exactly what that is. Routing essentially means how the website itself is able to create a URL path that allows users to change pages, from one page template to another.

This routing element can be a bit problematic for SEO when it happens exclusively on the client side, causing the generation of a new URL path when you click a link, which only happens within the browser.

To give you an example, imagine that you land on a category page with plenty of filters to refine your customer journey. You can toggle a filter on or off, or click on a link, but the URL doesn't change. That means that no server request is being produced, which in turn means that both search engines and users will not have any idea that new content has been loaded. This is client-side routing, and it may cause a few issues with crawling and indexation.

Client-side rendering can be a blocker as well. While client-side routing can affect the crawling, the discovery of search engines, and indexation, client-side rendering impacts the rendering (as it says in the title).

This is particularly a problem if we're talking about web apps based on React. React is basically a pre-packaged JavaScript library, which makes it quite difficult for even the most seasoned web developers to tweak it because it's pre-configured. Unfortunately for SEO, React is built on the client side by default, so it has client-side routing and rendering by default.

If you're landing on that same category page with lots of filters, it will take you some time for React to gear up the page template on the first load, because during this initial load, React will execute JavaScript in the browser, causing the browser's main thread to overload. Not only will this result in a slower initial page load time, but more importantly, it will be hard for search engines like Google to render all the content from the page.

Let's say you've got an important link on that page that is loaded via React. In that case, JavaScript will run in the browser to request the feature from the React codebase, but it is not going to signal the server; it's just going to send an alert to React. If the server doesn't receive an update, the search engines will be left with the version of the page that exists in the raw HTML, and they will most likely just render that version. Therefore, Google might lose some critical content if it has been added to the rendered version using React.

Now, I know people can argue that Google and search engines have become better at fetching and executing JavaScript. That’s true, if we compare this to five years ago; however, from my experience, aggressive client-side JavaScript can cause issues with rendering critical components of a page.

For example, I had an issue with an e-commerce client in the automotive industry that heavily relied on this React library to render the filter banner at the top of the page to allow users to select different options. Not only that, the product listings showcased in the body of the page relied massively on client-side JavaScript. Therefore, we ended up with Google receiving pages that looked exactly the same as the main category page.

That caused the famous indexing state in Google Search Console called ‘duplicate’, and Google chose other canonical URLs. In other words, the main blocker for client-side JavaScript was an aggressive reliance on JavaScript, with filter banners and product listings highly relying on JavaScript to be rendered on the page.

The second blocker is when you have millions of pages that are built to respond to client-side routing approaches and are client-side rendered. That same client submitted 1,000 client-side routed and client-side rendered product pages via an XML sitemap, and they didn't last long in Google’s index. They were rejected after a day or two because of these two main blockers: aggressive client-side rendering provided by JavaScript and tonnes of pages being submitted in one go via an XML sitemap. Having these blockers can severely impact your indexation and your rendering.

From an SEO perspective, you would like to go with server-side routing if you could. Unfortunately for us, React as a library comes client-side rendered and routed by default. It’s very difficult for developers to tweak it and make any adjustments, and it costs money as well.

That’s why the main message of this tip is to make sure you align with the marketing goals. It can depend on whether you're working at an enterprise level or if you work in an agency. I'm bringing up my experience from working in an agency for four years now. I know that communication with developers and marketing managers can be quite slow and challenging, especially if they are not familiar with the potential impact of having a website that is entirely reliant on React.

Maybe they initially just wanted a website that was built like a portable app that users could access really easily, while also benefiting from a great user experience and reasonably fast loading speeds. However, when it comes to thinking of SEO, maybe they ignored those important blockers.

Also, the more time you leave these blockers in place, the harder it is to make things right. Making things right would mean levelling up to server-side routing and making sure that your category pages produce a new URL in the search bar, so that both people and search engines know that they are on a new page – and you can pivot, from an SEO perspective, because you have more pages in there.

You also want to level up to server-side rendering, of course, although that will depend on how much effort is required from a web development perspective, and how much money you're willing to spend.”

If the development team insists on routing on the browser, is there anything an SEO can improve about the way that is done?

“In theory (and if you are not using a React-based app), you could instruct web developers to pre-render the specific area of the website that is built in that way. You can actually force some libraries and some frameworks to pre-render. We’re talking about libraries like Angular and Vue.js. Next.js is even better because it's designed to be more versatile and more manoeuvrable, from a developer perspective.

When it comes to React, there is no such easy workaround, because it’s a different beast. It's more strict. It's a pre-configured and pre-packed chunk of code. The codebase is pre-packaged, so you cannot change it.

If they don't want to do anything about that, this is where the initial bit of my tip comes in: make sure that you are aligned with the marketing goals of your client. That requires you to be 100% clear on what they are in the first place.

In the second place, you have to communicate to the client that, with the situation as it is, you are able to do some things but not others. In other words, you should define your requirements up front. They may not want to do anything about that because there is no money to upgrade to another solution, or their developers are working with React because they just don’t know much about JavaScript.

Try to find a workaround that actually entails the overall marketing strategy. Then, you can pivot from that.

For example, let's say that 10-20% of the website is firmly built on client-side routing and rendering. You've got the store locator page with all the links to other store locators, and that cannot be changed effectively. As an SEO, you could take all of those URLs and try to submit them onto a new XML sitemap.

Like I said before, this might prove you wrong, because Googlebot might just reject these pages, but it might just work. To be fair, it might be the only solution you have if the store locator is a client-side routed template.”

Simone, what's the key takeaway from the tip you shared today?

“Align with the top marketing goals of your business. This is incredibly critical if you work at an enterprise level.

Of course, it might be more difficult if you work in an agency because communication with developers and the client is often cut short. In that scenario, you should probably push back to the developers and the clients, get down the rabbit hole, and make sure you get an answer as to why the website is built in React.

Also, find out what the main goal is. Make sure to liaise with your clients to properly understand the SEO value they are trying to pivot from within their marketing strategy. If the SEO channel is a critical touchpoint, then you can adjust your communication and SEO strategy to that. If it's not, maybe it's not even worth seriously promoting and endorsing a change from client-side routing to server-side routing because it requires effort, and the cost can be quite pricey.

On a more practical note, try to evaluate and understand how many pages on your site are client-side routed. Get a percentage. Is it 10% or is it 50%? You can start thinking in terms of trade-offs and adjust your SEO recommendation based on that, which could really vary.”

Simone De Palma is a Tech SEO Specialist at Omnicom Group. Find out more over at SEODepths.com.