The Marketer’s Guide to Server-Side Rendering

July 26, 2021 - 5  min reading time - by Paul Staten
Accueil > Technical SEO > The Marketer's Guide to Server-Side Rendering

Programming language isn’t an easy concept to grasp, especially when your SEO work has primarily been focused on the non-technical side. But here’s the thing about technical SEO: knowledge of it helps you understand the changes your website needs to make for better search engine ranking.
As Google rolled out of Core Web Vitals in June, which is part of its Page Experience update, every marketer that has not taken a closer look at technical SEO will want to do that now.
And when your website’s built on JavaScript frameworks, one part to dig into is server-side rendering.

What is server-side rendering?

Server-side rendering is when the process of retrieving a web page, grabbing the code, displaying the contents on a screen — it all happens on the server.
In SSR:

  • The server sends ready-to-be-rendered response to the browser;
  • The browser renders the page, making it ready to be viewed and then the browser downloads the JavaScript;
  • The browser then executes React as the page is ready to be viewed, and
  • The web page is then ready for interactivity.

The way it all happens has made it a better option to other types of rendering: client-side rendering (where the JavaScript is rendered by the browser, aka the client) and dynamic rendering (where users get client-server rendered content and search engines get server-side rendered content). Even Google encourages web developers to choose server-side rendering.
Why?

[Case Study] Managing Google’s bot crawling

With more than 26 000 product references, 1001Pneus needed a reliable tool to monitor their SEO performance and be sure that Google was devoting its crawl budget on the right categories and pages. Learn how to successfully manage crawl budget for e-commerce websites with OnCrawl.

The advantages of SSR

  • It helps load a web page when a user’s internet connection is slow
  • It allows for speedy loading of pages, contributing to better user experience
  • It creates a full HTML page, preventing the time-consuming process of data fetching
  • It allows pages to load, with all its elements, even when a user has an underpowered device, like an old generation smartphone
  • It contributes to SEO performance because it allows search engines to crawl and index pages accurately; bots can crawl pages easily since they understand JS

Overall, SSR helps you serve online customers better because your site visitors aren’t going to wait around for pages to display on their devices. Speedy page transitions also make sure your users never get a blank page, allowing them to use your site immediately.
Since Google is amping up its campaign to deliver more accurate results with algorithm improvements built around user experience, SSR is better for your SEO performance compared to client-server rendering.
But like everything else in digital marketing, a singular approach rarely works for everyone. In some cases, server-side rendering could be a problem. Like Google says, SSR “is not a silver bullet.”

The disadvantages of SSR

  • It involves a lot of work because it’s doing the same application twice: once on the client and then in the server.
  • It could delay time to first byte
  • It could affect internal linking or page quality since it can’t render third-party JS (e.g., user-generated content, product reviews, etc.) or any content not in your static HTML; bots will not be able to see them
  • URLs that aren’t updated could mean bots won’t be able to see new articles, which may lead to missed traffic

Another key aspect to SSR is that it means costs for the business since rendering occurs on your servers. But it’s a cost you may want to invest in because this type of rendering could contribute to Core Web Vitals optimization.

Why is SSR relevant to CWV?

Web developers and SEOs have been working for months in anticipation of the CWV roll out. About 60 percent of polled SEO agencies have been busy improving the CWV scores of clients. If you’re using SSR, you may not have to do substantial work to meet expectations.
Because SSR facilitates speed, your website could already do well with one of the metrics: the Largest Contentful Paint (LCP).
LCP focuses on the perceived loading experience. It measures the page load time when a web page’s biggest image or text is visible in the viewport. What you want to aim for in getting a good score is a 75 percent page load at <2.5 seconds.
The main challenges to getting good LCP are render-blocking JS and CSS; slow resource load times, slow server response and client-side rendering.
A shift to SSR is just one solution to improving LCP score because your problem may not be limited to CSR. You’ll want to work with your web developers to first identify what is causing your LCP to lag.
If the page source reveals code that doesn’t make sense (and your developer will tell you), then the problem may be CSR. If your developer discovers TTFB is poor, then you may be dealing with slow server response time.
The other CWV metrics are:

  • First Input Delay, which focuses on responsiveness, and
  • Cumulative Layout Shift, which focuses on visual stability.

Both aren’t relevant to SSR, so these are metrics you may want to put more effort into since SSR partly takes care of the LCP.

How to know if SSR is rendering web pages right

The best way to tell whether SSR is rendering your pages right would be to use tools. One of which is the Mobile Friendly Test. It’s a tool that provides you with a snapshot of how your web pages would appear to Googlebots and show you errors during rendering, if any.
Google Search Console also has a URL Inspection Tool that allows you see whether the search engine’s rendering your pages. Use it to check for missing content or any error relating to blocked JavaScript or CSS.
You can also go to View Render Source, which is a free Chrome extension. It’ll tell you how the browser renders a page from its original HTML to a working DOM. The extension will illustrate the difference between a raw and rendered version, with highlights of how the JS modified pages at render time.
Another Chrome extension to try is SiteCrawler. The JS-capable crawler crawls sitemaps, links and images and compares HTML-only and JS-enabled pages.

The Wrap Up

Much of SEO work involves optimization for pages that have already been “delivered” to the client or the browser. But when you examine how those pages “get” to the client and how you can improve how that happens, users have a better time on your website.
Bots crawl your pages correctly. Your pages get indexed. Your site has better search engine ranking.
Search engine updates along with changes in consumer behavior call for changes to your website as well. With CWV’s upcoming roll out, now would be a good time to look into SSR, a technical aspect that would affect your SEO efforts.

Paul Staten is a serial entrepreneur and the CEO/Managing Director of SEO Werkz. The first business he created is a computer repair company that still serves clients today, 15 years after its creation. SEO Werkz was featured in the Inc 500 list of 2016, and Inc 5000 in 2017 and 2018.
Related subjects: