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.
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.
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.
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.
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.
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.
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.
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.
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:
You can learn more about dynamic rendering here.
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:
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:
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.
