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.
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?
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.
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.
- 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?
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 Pros:
- 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.
Dynamic Rendering Cons:
- Unless you pursue asoftware 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 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).