Client-side rendering VS Server-side rendering

How client-side rendering works (CSR)

When we talk about client-side rendering, we are talking about rendering content in browser using JavaScript by getting a bare-bones HTML document with a JavaScript file that will render rest of the site using the browser. It is a relatively new approach to rendering websites. Instead of having a different HTML page per router, a client-side rendered website creates each route dynamically directly in browser. The great example is React.js.

Think of client-side rendering like ordering any product from website, that comes in parts. When it arrives, you have to assemble it. So, the server would be the factory from where it is manufactured, code would be un-assembled product, and browser would be your home where you have to assemble it.

Client-side rendering has two main downsides. The first major downside is effect on search engine bots. JavaScript can slow down search engine bots while they are crawling a website, which can cause, on larger sites, crawl budget issues. For example, Google bot has something called a second wave of indexing. That is the process, in which bots first crawl and index the HTML of the page, then it comes back to render the JavaScript when resources are available. It that process, JavaScript content might be missed. The second big downside is poor user experience. JavaScript rendering can add seconds of load time to a page which might cause user frustration and leaving your website.

Some of the benefits of using client-side rendering are making client-side rendering easier than server-side rendering for the website owner, and it is cheaper option as well, because it reduces the loan on their own servers.

How server-side rendering works (SSR)

On the other hand, server-side rendering is the most common method for displaying information onto the screen. It means that a website’s JavaScript is rendered on the website’s server. The great example is Next.js.

Think of server-side rendering, on a similar example as client-side-rendering, like ordering a product from a website, that comes to your home fully assembled and ready to use.

Some of the cons: frequent server requests, full page reloads and non-rich site interactions. Also, server side rendering can be much more expensive than client-side rendering. Server-side rendering also tends not to work with third-party JavaScript.

On the other hand, SSR has a lot of pros. The major purpose of using server-side rendering is better SEO. Because JavaScript if rendered on a website’s server, users get a faster page experience and it removes speed-related crawl budget issues. Furthermore, it eliminates risk of partial indexing, that may happen with client-side rendering.

Hybrid rendering

Also, there is hybrid rendering option – dynamic rendering. It is a mix of server-side rendering and client-side rendering. In general, when search engine bot tries to access the page, the website will send a fully-rendered page, but when user tries to access a page, their browser has to render it.

Taking everything into consideration, this might be the most preferred option because it is cheaper than SSR, but it gives you almost all benefits of using server-side rendering only.