Setting up SSR (Server-Side Rendering) with React framework can be daunting. There is no starting point when explaining to the technical team the benefits of SSR over CSR for better SERP visibility.
Introduction
This case study we will see how rendering fix helped websites improve their website visibility on SERP.
Post technical audit for the website, the team identified that the search engines (Google Bot) could not able to crawl the webpages due to the implementation of complete client-side rendering using the react framework. This resulted in a poor bot experience. To make sure the web pages are user-friendly and Google bot friendly, the team decided to switch to either SSR or a hybrid model (combination of CSR & SSR). First, let us understand what CSR & SSR is?
What is CSR & SSR?
JavaScript SEO is one of the most crucial parts of technical SEO that aims to make JS-heavy websites easier to crawl and index.
Client-Side Rendering (CSR):
A website’s JavaScript is rendered in your browser in client-side rendering rather than on the website’s server. So now, instead of getting all the content from the HTML doc, only the required HTML with the JS files will be rendered.
Server-Side Rendering (SSR):
In SSR, all page resources are rendered on the server rather than the browser. Then the browser presents all the requested actions on the user UI. All these processes of fetching data from the database to creating an HTML page and sending it to the client are done in milliseconds.
Since we know what CSR & SSR is, let us look at the advantages and disadvantages of implementing CSR or SSR on our website. The below image from Growth Rocket helps us with the same.
Now that we know all the aspects of CSR & SSR, let us understand how we used this in our real live project.
Example 1 - EdTech Website
About the brand & Challenges:
This is a popular Adtect company, a learning platform offering courses like JEE, NEET, K12, and many more in India. Post onboarding us for SEO activities. While the page had a good user experience, the google bot could not render the courier because of complete CSR implementation.
What did we do?:
This was a content-heavy website. We recommended the brand move to an SSR version that is SEO friendly.
Let us now look at rendering screenshots before and after the implementation.
Before:-
After:-
What Infidigit Provided them ?
With the correct implementation of rendering, search engines could crawl the entire web page. This helped bots to understand the page content and other elements better.
Improvement in the SERP rankings was observed post the rendering fix, leading to an increase in non-brand clicks.
Example 2 - Automobile Ecommerce Website
About the brand & Challenges:
This brand is a famous automobile brand in the used car industry in India. Post onboarding us for SEO activities. We observed that while the page was having a good user experience, google bot could not render the page because of complete CSR implementation.
What did we do?:
We recommended the brand to move to a hybrid version of CSR & SSR combined, which made sure that the page is user-friendly and google bot friendly. The top navigation, footer content and footer links were shifted to SSR while all the listings were still on CSR.
Let us to know look at rendering screenshots before and after the implementation.
Before:-
After:-
What Infidigit Provided them ?
With the correct implementation of rendering, search engines could crawl the entire web page. This helped bots to understand the page content and other elements better.
Improvement in the SERP rankings for non-brand keywords was observed once the technical team resolved this issue
Improvement in the SERP rankings was observed post the rendering fix, leading to an increase in non-brand clicks.
Get in touch with us
We have grown online traffic and sales for multiple businesses. We would love to do it for you too.