Avoid client-side routing and rendering – with Simone De Palma

Simone De Palma warns that client-side routing and rendering can be problematic for rankings.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.