client side server side and dynamic rendering compare

Introduction

Another fundamental pillar oftechnical SEO is rendering. Rendering is the process by which Google retrieves your pages, runs your code, and assesses your content to understand the layout and structure of your site. This information is then used to rank the quality and value of your site content in search results.

As the web has transitioned primarily from a document platform to an application platform, javascript has played a larger role in this rendering process and posed significant challenges to the user and bot experiences.

This article presents three different types of rendering for webpages (client-side, server-side, and dynamic rendering) that your website can leverage to present content to users and search bots.

Let's get started.

What is Client-Side Rendering (CSR)? What are the pros and cons?

With client-side rendering, content is rendered in the browser instead of the website's server. If you use a javascript framework, this is the default form of rendering.

client side rendering

Client-Side Rendering Pros:

Client-Side Rendering Cons:

The analogy to think about here is grocery delivery. All of the ingredients are delivered to your house (browser), but you are responsible for assembling them into a page (meal)

What is Server-Side Rendering (SSR)? What are the pros and cons?

With server side rendering, content is rendered on the website's server to avoid additional server requests and round trips for data fetching and templating on the client side.

server side rendering

Server-Side Rendering Pros:

Server-Side Rendering Cons:

The analogy to think about here is restaurant food delivery. Everything has been prepped at the restaurant (in this case, the website's servers) and delivered to your house (in this case, your browser) ready to eat.

What is Dynamic Rendering (DR)? What are the pros and cons?

Withdynamic rendering, client-side rendered content is sent to users and server-side rendered content is sent to robots. It just depends on what user-agent calls the website.

dynamic rendering

Dynamic Rendering Pros:

Dynamic Rendering Cons:

The analogy to think about here is restaurant food delivery for robots (content comes pre-rendered), and grocery delivery for humans (content must be rendered in the browser).

Which form of rendering is best for SEO?

It depends on the nature and size of your website. We recommend using dynamic rendering if your website checks any of the following boxes: