Slalom Boston’s software engineering guild will be diving into commonly used architecture patterns and gotchas in a series of posts. In this post, we will break down two of the most used web patterns, namely SSR(Server Side Rendering) and CSR(Client Side Rendering). We will lay out the differences and use cases they are best suited for. The diagram below captures some of the other patterns we will cover in upcoming posts.
This approach became popular with the rise of frameworks such as Angular and React. Client-Side Rendering is a rendering technique where after an initial request to a server, all subsequent renders occur in the browser. Web applications made with this technique are often called Single Page Applications (SPA)because there is only a single HTML file, or “page” ever served to the client. This file, often index.html, typically contains boilerplate HTML code and a single element that is the application root.
The conventional way of rendering HTML on a screen relied on Server-Side Rendering. Webpages displayed static content with little or no interaction required from the end-users.
In the modern times, websites are no longer just used for displaying static pages but can display dynamic content. This allows users to interact with websites, allowing for applications such as online shopping or banking. When a user requests a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet. Hence, the initial page load time is faster. If a request is made for a different page on the website, the browser will make another request for new information. This will occur each time a user visits a new page that the browser does not have a cached version of.
Server-side Rendering vs. Client-side Rendering
When deciding what to choose when, a number of factors might influence that decision. We have captured some factors that are commonly used to determine one approach over the other.
There is no wrong answer, just the best pattern for a given scenario.