Server-Side Rendering vs. Client-Side Rendering
Understand the differences between server-side rendering (SSR) and client-side rendering (CSR) as you learn when to apply each to improve web performance and user experience. This lesson helps you evaluate trade-offs between fast initial loads, dynamic content updates, and SEO considerations to design effective product architectures.
Introduction
In terms of APIs, one of our goals is to make the applications perform better. Let’s take an example of a video hosting site. We might notice that it takes a while for the thumbnails of the videos to load, as shown in the illustration on the right. Suppose this video hosting site utilizes an optimized API gateway. However, the content may still be displayed after a significant delay. There are multiple reasons for having higher latency, with rendering being the most common. Rendering is described as the process of utilizing HTML, CSS, and JavaScript code into an interactive web page or depicting the web page in the browser.
In this lesson, we’ll explore numerous rendering techniques and determine when to utilize each one.
Server-side rendering (SSR)
Server-side rendering (SSR) is a technique that generates a complete HTML document on the server and sends it to the client as a response to a request. The browser parses the HTML document and starts displaying it. On the initial load, the page is static and noninteractive. However, once the JavaScript file has been downloaded from the server, it modifies the DOM, and the page becomes interactive. ...