Client-Side vs. Server-Side JavaScript Rendering: Which Is Better for SEO?

Many websites these days are built with JavaScript.

While there's nothing objectively wrong with JavaScript, the way we implement it can have pretty big consequences for both our user experience and how we rank in search results.

Developers are having to consider how their JavaScript affects SEO, and SEOs and other digital marketers are now having to learn more about the technology their content and website experiences are powered by.

If you're in either boat, you're in the right place. Continue reading to learn the difference between client-side rendering and server-side rendering, or jump to a specific section.

• What is client-side rendering?
• What are the benefits of client-side rendering?
• What are the risks of client-side rendering?
• What is server-side rendering?
• What are the benefits of server-side rendering?
• What are the risks of server-side rendering?
• Which is better for SEO, client-side or server-side rendering?
• The hybrid rendering option: dynamic rendering
• What types of websites need to worry about this?
• How can I audit my JavaScript website for SEO issues?

What is client-side rendering?

Client-side rendering means that a website's JavaScript is rendered in your browser, rather than on the website's server.

According to Google's Martin Splitt, "If you use a JavaScript framework, the default is client-side rendering. This means you send the bare-bones HTML over and then a piece of JavaScript, and the JavaScript fetches and assembles the content in the browser."

Think of client-side rendering like ordering furniture from IKEA. IKEA doesn't send the furniture to your house already assembled. Instead, they send you the parts that you have to assemble once they arrive at your house.  

What are the benefits of client-side rendering?

Because all the burden of rendering content is on the client (i.e. person or bot trying to view your page), client-side rendering is the cheaper option for the website owner because it reduces the load on their own servers.

It's also the default state for JavaScript websites, making client-side rendering easier than server-side rendering for the website owner.

What are the risks of client-side rendering?

Client-side rendering has two main downsides.

For one, client-side rendering can increase the likelihood of a poor user experience. JavaScript can add seconds of load time to a page, and if that burden is fully on the client (website visitor), then they could get frustrated and leave your site.

Related Resource: Page Speed & SEO: How Load Time Affects Bots and Humans Differently

The second big downside of client-side rendering is its effect on search engine bots. For example, Googlebot has something called a second wave of indexing. In this process, they crawl and index the HTML of a page first, then come back to render the JavaScript when resources become available. This two-phased approach means that sometimes, JavaScript content might be missed, and not included in Google's index (see "What is render budget?" for more information).

And other search engines are worse at rendering JavaScript than Google.

JavaScript can also slow search engine bots down while they're crawling a website, which on large sites, can introduce crawl budget issues.

What is server-side rendering?

Server-side rendering means that a website's JavaScript is rendered on the website's server. To use the furniture example again, this would be like ordering furniture that arrives at your house fully assembled.  

What are the benefits of server-side rendering?

Because JavaScript is rendered on the website's server, both search engine bots and humans get a faster page experience. This not only means a better UX (which is also part of Google's ranking algorithm), but it also eliminates speed-related crawl budget issues.

Sending fully-rendered pages to search engine bots also means that you're not risking the "partial indexing" that can happen with client-side rendered content. When Google and other search engine bots try to access your page, instead of having to wait for rendering resources to become available before seeing your full page, they'll get the fully-rendered page right from the get-go.

What are the risks of server-side rendering?

Server-side rendering can be expensive and resource-intensive. It can be expensive because the full burden of rendering your content for bots and human website visitors is on your servers. It can be resource-intensive to implement, since it's not the default for JavaScript websites and will require work from your engineering team to execute.

Server-side rendering also tends not to work with third-party JavaScript. So, if you use services like Bazaarvoice to pull in reviews on your website, they won't be rendered with server-side rendering.  

Which is better for SEO, client-side or server-side rendering?

Between the two options, server-side rendering is better for SEO than client-side rendering. This is because server-side rendering can speed up page load times, which not only improves the user experience, but can help your site rank better in Google search results.

Server-side rendering is also better for SEO because it removes the burden of rendering JavaScript off of search engine bots, solving speed-related crawl budget issues and partial indexing.

But what if you can't afford to implement server-side rendering? Or you don't have the technical resources to execute it?

Thankfully, there's a third option.

The hybrid rendering option: dynamic rendering

Dynamic rendering is a hybrid of client-side and server-side rendering.

It works like this.

When a search engine bot tries to access a page, the website sends over a fully-rendered page. But when a human tries to access a page, their browser has to render the page.

This Google-approved rendering option is preferred by many because it:

• Is cheaper and easier to implement than server-side rendering
• Solves speed-related crawl budget issues
• Solves partial indexing issues
• Lets human visitors enjoy the interactivity that JavaScript provides

You can learn more about dynamic rendering here.

What types of websites need to worry about this?

The debate between client-side rendering, server-side rendering, or dynamic rendering is only relevant for websites that utilize JavaScript. If your website is purely HTML, there's nothing that human users or search engine bots need to render.

Full JavaScript websites built on libraries like React and Angular may be completely blank until they're rendered, depending on how they're coded.

Websites can also be part JavaScript and part HTML. For example, maybe the website only relies on JavaScript to pull in reviews (e.g. Bazaarvoice) or "related products" widgets. This means only part of the page is visible before rendering.

If your website is partially or fully reliant on JavaScript, especially if your site is large (i.e.  thousands or millions of pages) and changes often (e.g. news publishers or e-commerce sites with high product turnover), then you'll definitely want to carefully consider your rendering options.

For more information, view Google Developer's guide to "Understanding the JavaScript SEO Basics" or check out this video from Google's Martin Splitt:

How can I audit my JavaScript website for SEO issues?

Before choosing a solution, it's a good idea to diagnose what SEO problems, if any, exist on your JavaScript website.

There are a few ways you can do this:

• Using a "disable JavaScript" extension -- You can use various browser extensions to turn off JavaScript on a webpage you're viewing. This is an easy way to see where the JavaScript elements are on your page. If content or links disappear when you turn off JavaScript, you may have a JavaScript SEO problem.
• Conducting a Google search for JS-loaded content -- Once you've identified JavaScript-loaded content, try copying some of that text and pasting it into Google search. If no results are returned for your website, you may have a JavaScript SEO problem.
• Google Search Console's URL Inspection Tool -- Run a page through this tool then click "View Crawled Page" to see what Google has rendered. If some of your page's content is missing, you may have a JavaScript SEO issue. You can do the same thing with Google's Rich Results Test or Mobile-Friendly Test.
• Comparing an HTML-only crawl to a JS-enabled crawl -- If you have a JavaScript-capable crawler like SiteCrawler, you can crawl your site without JavaScript enabled and then again with JavaScript enabled. While other tools allow you to test one page at a time, this is a great way to get a high-level view of JavaScript issues across your entire site.

We also recommend reading real stories from companies like Carvana who have identified and fixed serious rendering issues for improved SEO performance, or contacting us directly to learn more about the tools we've built to help solve JavaScript SEO issues.