How Rendering Works

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. Deciding which type of rendering to use depends on the nature and size of your website.

There are three different types of rendering: client-side, server-side, and dynamic rendering. The difference between the three types of rendering depends on the method of delivery of resources to the browser and to search engine bots. Each of the three options has pros and cons.

Client-Side Rendering

Client-side rendering is when the content of a website is rendered in the browser instead of the website's server. This is the default form of rendering. 

One way to understand the process of rendering is to think of the site assets as ingredients and the fully rendered site as a ready-to-eat meal. With client-side rendering, the ingredients are delivered to you, but you still need to take the time to assemble your meal. 

Client-side rendering is often more cost-effective than server-side or dynamic rendering, but it can come at the cost of a quality user experience. This is because client-side rendered websites often take longer to load. 

Server-Side Rendering

Server-side rendering is when the content of a website is rendered by the server rather than the browser. 

If we go back to the food analogy, you can think of server-side rendering as a food delivery service. The hard part of cooking the meal is performed by the delivery service, so all you need to do is open it up, maybe warm it up a bit, and set the table. 

Overall, there are fewer page speed and crawl budget-related SEO issues with server-side rendering than client-side rendering. However, there are some cons. First, server-side rendering is more expensive, and while first contentful paint is improved substantially, time-to-interactive often lags. For the user, this means that the page appears to load faster, but they cannot interact with the page until all resources have been loaded.

Dynamic Rendering

Dynamic rendering is the process of serving content based on the user agent that calls it. This means serving a client-side rendered version of your site for human users and a separate, server-side version for search engines.

On the server-side, javascript content is converted into a static HTML version preferred by search engine bots. This allows them to fully access, crawl, and index webpage content and to use your crawl budget effectively. When this occurs, the client-side experience is unchanged. Dynamic rendering is one of the biggest technical SEO initiatives Google has endorsed in years.