Introduction
Another fundamental pillar of technical 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 Pros:
- For the website owner, it's the cheapest form of rendering because it reduces the server load, thereby making it the most reliable and scalable way to present dynamic websites.
Client-Side Rendering Cons:
- All the burden is placed on the visitor trying to view the page. This increases the chances of poor user experience by adding milliseconds to seconds of additional load time.
- It forces a second wave of indexing t that can take hours, days, or weeks to complete where Search Bots have to return to the site to render the javascript as resources become available.
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 Pros:
- There is a fast first contentful paint and time to interactive for users.
- Search Bots are immediately presented with a full-rendered, HTML file.
- There is a minimized risk of partial indexing/missing content.
- Overall, there are less page speed and crawl budget-related SEO issues than client-side rendering.
Server-Side Rendering Cons:
- It is expensive and resource-intensive for the engineering team.
- It tends not to work with 3rd party javascript.
- The page is displayed quicker, but users still can't interact with content until all resources have been loaded.
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?
With dynamic 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 Pros:
- Your content can be crawled and indexed without Google needing to execute Javascript.
- It's less time and resource-intensive for developers than pre-rendering content for both humans and robots.
- Solves crawl budget issues that are page-speed related. Google is able to crawl more pages on your site.
- Human visitors still benefit from the interactive elements that require javascript.
Dynamic Rendering Cons:
- Unless you pursue a software solution, engineering time and resources are required to implement this form of rendering.
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:
- Your website is partially or fully reliant on javascript.
- Your website has at least tens of thousands of pages.
- Your content changes often and is heavily reliant on a fresh index (think e-commerce and news publisher sites).
