A Simple Breakdown of Client-Side Rendering vs. Server-Side Rendering
When a user attempts to navigate to a webpage, the request is sent to the server and the server returns a fully fleshed out HTML document that the browser then renders to the screen. It’s a quick process that usually only takes a few milliseconds to complete, but it must be repeated each time the user wants to load a new page.
When a user clicks the navigation links to traverse the website, a request is sent to the server for a new HTML file every single time. This can result in slow page loads, frequent server requests and a lack of interactive functionality. There are other solutions, such as Static Generation to pre-render pages ahead of time, though it’s usually only applicable for sites that don’t require much, if any, user input.
None of these issues were much of a concern when pages were simpler, but modern-day websites are rich, fully featured, interactive and complex. It’s hard to think of them as traditional websites at all any more—they’re more like phone apps in your browser.
So why isn’t server-side rendering going the way of the dinosaurs? The two main reasons to use server-side rendering in 2021 are for a faster initial page load (more on this below) and for Search Engine Optimization (SEO), as search engines are able to easily crawl the rich HTML files for metadata.
The clear downside is that client-side rendering can require a hefty initial load time. Instead of loading each page one by one, client-side rendering pulls in all the required code at once. This isn’t much of an issue on smaller sites, but imagine a complex web app with thousands of lines of code, tons of data, rich user interactivity and multiple routes.
Client-side rendering also doesn’t have the built-in SEO benefits, as the single HTML file is boilerplate-only code that doesn’t contain much actual content or metadata for the search engines. Popular libraries such as Next.js for React or Nuxt.js for Vue do exist to offer server-side rendering options within these powerful and ubiquitous frameworks, which can be a boost to SEO.
Pros: SEO-friendly, faster initial load
Cons: Frequent server requests, full page refreshes, slower after initial load
Popular Use Cases: Company websites, static pages, complex UIs that don’t require much user interactivity
Pros: Wicked fast after initial load, complex and seamless user interactions
Cons: Poor SEO out of the box, requires an external library like Vue or React, potentially long initial load time
Popular Use Cases: Web apps with lots of logic and user functionality where SEO isn’t as important, e.g. Facebook or Trello