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.
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.