Web Development Architecture Patterns (and When to Use Them) | by Slalom Boston Technology Enablement | Slalom technology | Jul 2022

The Boston Slalom Software Engineering Guild will dive into commonly used architecture patterns and pitfalls in a series of posts. In this article, we will break down two of the most widely used web patterns, namely SSR (Server Side Rendering) and CSR (Client Side Rendering). We’ll outline the differences and the use cases they’re best suited for. The diagram below captures some of the other patterns we’ll cover in future articles.

Client side rendering

This approach has become 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 renderings occur in the browser. Web applications created with this technique are often referred to as single page applications (SPAs) because there is only one HTML file, or “page”, ever served to the client. This file, often index.html, usually contains boilerplate HTML and a single element which is the root of the application.

When the server receives a request, it serves the file with a JavaScript bundle. After the client uploads these assets, the JavaScript code generates the actual content and inserts it into the root element.

When a user clicks on a navigation link, instead of the browser refreshing and requesting a new page, the JavaScript code responsible for SPA routing generates and injects a new “page” inside that root element, replacing the page former. This creates a browsing experience approaching the speed and fluidity of a native app. This is especially true if the user has a slow network connection because once the initial request to the server is complete, user latency is no longer the limiting factor when browsing a web application.

Server-side rendering

The conventional way of rendering HTML to a screen relied on server-side rendering. Web pages displayed static content with little or no interaction required from end users.

In modern times, websites are no longer only used to display static pages, but can display dynamic content. This allows users to interact with websites, enabling applications such as online shopping or banking. When a user requests a web page, the server prepares an HTML page by retrieving user-specific data and sends it to the user’s machine over the Internet. As a result, 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 happen every time a user visits a new page for which the browser does not have a cached version.

Server Side Rendering vs Client Side Rendering

When deciding what to choose when, a number of factors can influence that decision. We’ve captured some factors commonly used to determine one approach over another.

There is no wrong answer, just the best model for a given scenario.

James S. Joseph