A Simple Breakdown of Client-Side Rendering vs. Server-Side Rendering
While websites traditionally relied on server-side rendering to display code in a browser, the emergence of JavaScript libraries such as React, Angular and Vue have popularized a newer method known as client-side rendering. There are pros and cons to each approach, and it’s important for frontend developers to understand the nuances in order to make the best decisions for their apps.
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.
As an example, imagine a website built with vanilla JavaScript and HTML. No library or frameworks. Each subpage has its own route, such as www.examplewebsite.com/movies or www.examplewebsite.com/tvshows, and thus its own HTML file.
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.
Client-Side Rendering
Client-side rendering has become exponentially more popular with the emergence of Single Page Application (SPA) frameworks for JavaScript, such as React and Vue.
Instead of sending a request for a new HTML file on each page load, with client-side rendering the user’s machine only makes one initial request for a singular, bare bones, pared-down HTML file. (Hence, the term Single Page Application.) No additional server requests are made as the user navigates the page. All changes and re-renders are handled through JavaScript in the user’s browser. Instead of refreshing and rebuilding every page from scratch through server requests for a new HTML file, libraries such as React use client-side rendering to update only the specific DOM nodes that received changes.
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.
Recap
SERVER-SIDE RENDERING
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
CLIENT-SIDE RENDERING
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
