Server Side Rendering(SSR) and Client Side Rendering are two different ways in which a website is served to a client.

SSR and CSR both have their own advantages and disadvantges.

Which one would you prefer for better SEO (e.g. blog, ecommerce etc), and what are the quirks of search engines that affects your page ranking?

This whole debate has JS at the center - if there is no JavaScript in picture(hardly possible in modern websites and apps) and there is plain old HTML and CSS, then there is no CSR and SSR - its a static site!

What is CSR

  • The site (HTML, CSS, JS) will reach to client in minimal HTML(usually a single page served from e.g. a CDN)
  • then the JS does most of the actual HTML generation(creating DOM) and then the HTML starts to exist on client.
  • All other pages are also rendered by the JS by modifying DOM in the same page(hence Single Page Application)

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

What are the benefits of client-side rendering?

  • As 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.

What are the risks of client-side rendering?

  • Client-side rendering can in general increase chances of a poor user experience. It is because JS 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.

  • CSR’s 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). 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 SSR

  • The site will be ready with the final intended HTML (all rendered) when it reaches over internet from server to client. Any JS that has to run, executes on Server and HTML is created.

Frameworks like Next.js and Nuxt.js provide SSR capabilities.

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.
    • Expensive: because the full burden of rendering your content for bots and human website visitors is on your servers.
    • 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.

Why SSR is better for SEO

  • bots get full HTML when crawling.
  • UX is better - its one of the params for better ranking.

Third approach - Dynamic Rendering

SSR for search engine bots, CSR in all other cases.

  • Send a fully rendered page to search engine bot when it tries to access the page.
  • When a human tries to access the same page, their browser has to render the page.

References: