Server-side rendering: What SEOs need to understand

Knowledge is power. It is also a pain when you learn upsetting facts about things you love. For technical SEOs, JavaScript is a hot topic and will continue to be one for quite some time. When it comes to rendering JS on a website, there are a few options for the best way to tackle this problem. Today, we are going to focus on one of those: server-side rendering. 

What is server-side rendering?

Let’s start by defining “rendering.” Rendering is the process of retrieving a web page, launching the code, and assessing the structure and design of a page. Rendering can occur in a number of ways; client-side, server-side, and dynamic. 

Server-side rendering (SSR) is the process of rendering your web pages through your own servers. In client-side rendering (CSR), this process is completed through the user’s browser, while dynamic rendering occurs through a third-party server. 

There are two versions of your web page with SSR: the initial HTML and the rendered HTML, known as the DOM (direct object model). Google is only able to access the rendered HTML. This means it is critical that key elements and content have been rendered in order to receive “credit” from the search engine. 

What are the benefits of server-side rendering?

There will always be pros and cons for all of the rendering options. It is up to the SEO and engineering teams to review these and decide which path is the best based on resources. From a search engine perspective, server-side rendering is the second-best option for rendering JS. The biggest benefit is the rate at which pages can be rendered. The faster search engines can “view’ your pages, the faster it can move on to the next page and improve your crawl budget. Not only does your crawl budget improve, but your user experience also increases. 

Another benefit of SSR is that you can ensure all of your page elements are rendering. When you rely on a browser, you are reliant upon their technology. An older machine that may not be able to process large resources could result in partial rendering. This means crucial content elements or information might be missing, and Google cannot give you “credit” for those elements. This creates a bad UX. It may also impact search engines’ ability to rank pages that were missing important information. 

What are the pitfalls of server-side rendering?

While server-side rendering is great for crawl budget and site speed, it does have a pretty big barrier: it is very expensive. Because the website is being rendered on your company servers, there are costs associated with that process. Where CSR forces the user to “pay” this cost, SSR has your company foot that bill. If you want to move to SSR, this cost may be a roadblock. 

The other drawback of SSR is that it cannot render third-party JavaScript such as reviews, UGC, product recommendation engines, or anything that injects content that is not part of your static HTML. These links and content pieces will not be present. This could impact internal linking or even overall page quality. If the majority of your content is UGC injected by a service, it won’t be visible to bots. 

What is static SSR? 

If you have been looking into the case for server-side rendering, you may have come across the term “static SSR.” This is slightly different than SSR in that these pages are rendered at the time they are built. For SSR, these pages are only rendered when they are called by a user (or bot). There are benefits to static SSR in regards to fast time-to-first-byte (TTFB) and first contentful bite (FCB). Site speed is crucial to SEO and user experience. The cons for static SSR is that it can be inflexible and lead to hydration (the process of injecting JS to the static HTML via CSR). 

Does SSR help Core Web Vitals?

At the center of every SEOs world right now is Core Web Vitals (CWV). These three little words are our new Mobile-First Index. Our world is changing, again and now is the time to adapt. In regards to SSR, yes, it can help your CWV. Because pages are rendered on your site, there is an improvement in site speed, specifically as it relates to Largest Contentful Paint (LCP). We know that we have to meet the criteria across three metrics; LCP is one. A fast LCP means you are one-third the way to hitting those new targets. 

What do search engines think of SSR?

A search engine’s priority is meeting its user’s needs. Are they recommending the content that is relevant to a query? In order for search engines to meet this goal, they need to be able to crawl the whole internet. As of February 11, 2021, there were over 5.65 billion web pages. The amount of work it takes to crawl that many pages is no easy task. Search engines rely on websites to use the most current technology and recommendation to help them help you. SSR is one of the best ways to help bots crawl your site. Google is encouraging developers to go one step further by using dynamic rendering to further increase the rate at which they can crawl the internet. 

How to confirm SSR is rendering pages properly?

Congratulations, you have successfully implemented server-side rendering! Now, how do you know if it is working? There are a number of tools that you can use to help aid that research. 

• View Rendered Source – A Chrome plugin that shows you the difference between initial HTML and rendered HTML.
• URL Inspection Tool in GSC – real-time JS warnings and errors Google encounters.
• Mobile-friendly test – get rendered page HTML snapshots.

JavaScript-built websites aren’t going anywhere anytime soon. As SEOs, it has become our responsibility to help developers and leadership understand the impact of how you handle JS on your website. Your company is investing hundreds of thousands of dollars to build a functional website. If the search engines can’t render that content, it becomes a loss to the company. There are a lot of options when it comes to how you render your JS. Each has its pros and cons that must be weighted. The more we understand how these tasks are accomplished and how they impact our overall SEO strategy, the better we are at making a case for a change. The power of knowledge is in your hands – now use it for good.

Join us for a live webinar to learn how dynamic rendering gets your JavaScript-loaded content indexed, ranking and driving traffic and revenue.

Written by Leslie Ramey – SEO Solutions Consultant