ProjectsAboutBlog
  1. +
  2. +
  3. +

Javascript SEO: Server side or client side rendering?

Published: 2020-04-10

Before you read this, I would like to state that I'm not an SEO expert all though I did my Internship at an award-winning digital marketing agency called IIH-Nordic. During my time there my primary area of work, was Conversion Rate Optimisation and web-development. While I spend a lot of time getting to know the fundamentals of search engine optimization and web-crawling, I soon realized that both server-side and client-side rendering are of significant importance to web developers. This is a summation of what I’ve learned during my internship and through my personal research.

The immediate differences between server-side and client-side rendering.

First of all, I think it would be fitting for me to explain the general definitions of both server- and client-side rendering and how the two differ from one another.

Server-side rendering (SSR)

Server-side rendering (often referred to as SSR), is the traditional way of rendering content to your page. When a user enters your site, a request is sent to the server. The response will return the HTML file for your page and your content will load correspondingly.

Client rendering (CSR)

Client-side rendering (CSR) on the other hand, is a more modern technique in web-development. Whereas a SSR request would respond with an entire HTML file that’s displayed as your site in the browser, CSR will only be sending an HTML file containing a Javascript file. With this file, the browser will generate the rest of your page.


Benefits:

Server-side rendering (SSR)

Since SSR is the traditional way of rendering a website, most websites on the web will be doing it this way. Does this mean that this is the right way? Not necessarily, but it’s important to note that all search engines are optimized for SSR, meaning you should consider how important good SEO is to you or your clients.

*Note: Google claims that their search engine can read through javascript files, yet a lot of people seem to be disagreeing.

Client rendering (CSR)

So you might ask yourself, what are the benefits of CSR? Instead of an HTML file I’ll be presenting the search engines with a javascript file, that they arguably cannot understand?

Well Speed is the primary answer to this controversy. The Client can also be interpreted as your device whether that would be your computer or phone. Javascript is a client-side language, which means that your device can build the page for you. In most cases this will reduce the time that it takes for your page to build.

Disadvantages:

Server-side rendering (SSR)

So you might already have guessed what disadvantages SSR comes with. Pagespeed is the main reason that someone would choose CSR over SSR - especially when it comes to web applications that don’t necessarily need good SEO. Since Javascript is a client side language it will load faster than serverside rendered HTML-files, because it can take advantage of the processor of your device.

Client rendering (CSR)

Since CSR is based on javascript, many developers believe that search engines can’t crawl your site. I cannot confirm whether that’s true or not.

Can server-side rendering and client-side rendering be combined?

Well no… and yes.

Naturally, SSR and CSR are two different things. SSR taking place at a server, whereas CSR is happening directly on your device - so there’s no way of combining the two into a new type of rendering.

However, there has been developed Javascript frameworks who’s utter purpose is to use both SSR and CSR on the same page. The current frameworks that I’m aware of are:

I won’t go too much into details about how each of them works, but just the explain the concepts they are built upon.

Next.js and Gatsby.js are frameworks that rely on another javascript framework called react.js, whereas Nuxt.js is dependent on a javascript framework called Vue.js. In theory Vue and React are great frameworks - but they have a common pitfall… you might have guessed it already: They’re based on javascript which could result in low ranking in a search field.

What Next, Nuxt and Gatsby introduces is the ability to convert javascript into readable HTML-files, meaning that the page can be server-side rendered and therefore recognized by the search engines. Immediately after the search engines have crawled the page, the frameworks will start to introduce client-side functionality giving visitors that fast page speed, that is so desired by many.

If you want to know more about Gatsby.js you can read through one of my earlier posts:

Gatsby - Is static generated websites a technology of the future?

Otherwise, I can recommend a podcast called syntax.fm. I’ve learned a great deal about this topic through their weekly chatter.

More Insights

  1. Published at: 2020-04-13

  2. Published at: 2020-04-11

  3. Published at: 2020-04-09

  4. Published at: 2020-04-09

  5. Published at: 2020-04-08

  6. Published at: 2020-04-07

  7. Published at: 2020-04-07

  8. Published at: 2020-04-07

Author

Morgan Grage

Full-stack developer