Every time we start a new web-app, one of the most important decisions that we face is how we're going to render our web-app. This choice will make an impact in how our application will behave for our users.
In this post, I will introduce you to the following rendering approaches:
Before we start explaining anything, I will introduce you to some words that we'll use in this post, that are related on how to measure the performance of any rendering approach:
Server Side rendering generates the full HTML for a page on the server in response to navigation.
This avoids additional round-trips for data fetching and templating on the client, since it’s handled before the browser gets a response.
Server Side Rendering TTI
Static rendering is an evolution over Server Side Rendering.
The main difference between SSR and SR is that Static Rendering happens at build time, instead of SSR that happens at runtime.
Static Rendering TTI
Client-side rendering (CSR) means rendering pages directly in the browser using Javascript. All logic, data fetching, templating and routing are handled on the client rather than the server.
Client Side Rendering TTI
Server Side Rendering with (Re) Hydration is a rendering approach that combines SSR and CSR.
When the user requests a page, the HTML is pre-rendered in the server and it starts streaming to the browser. After all HTML and JS are fully loaded it boots a SPA and the next pages are handled client-side.
SSR with (Re) Hydration TTI
It's an evolution over CSR approach that consists of rendering the web-app skeleton at build time to generate static HTML.
Well, it really depends on your use case, and which metrics are important to your business.
Here's a comparison table made by Google Devs about all the rendering approaches I've explained you before:
Rendering Approaches comparison
Well, that's all, in the following posts we will keep exploring more concepts related to web apps architecture.
If you like this post, subscribe to our newsletter to receive the latest news about technology, software architecture and product development!
Subscribe for latest updates
Sign Up for our newsletter and get notified when we publish new articles for free!