Web Application Architectures - 101
August 7, 2020
Websites have become an integral part of the technology landscape. It is important for developers to understand how they work, and how various internal components of a website interact with one another. In this article, we’ll look at how web applications are structured and some of the most used web application architectures.
Table of Contents
- Components of a Web Application
- Traditional Server Side Rendering
- Client Side Rendering
- Universal or Isomorphic Apps
The end user can visualize a website, with various buttons, content and links that behave beautifully and serve the content that they request. The framework that works behind the scenes to manage this plethora of different content and programs interacting with each other could be termed as an architecture.
Figure: Client Side Rendering vs Server Side Rendering (Source)
Components of a Web Application
A Web Application could be termed as an orchestra of various diverse components, all working together in harmony to produce a beautiful website.
A database, or a database server, stores data and provides an interface to Create, Read, Update and Delete the data, according to the business logic of our application. There are multiple database providers like Firestore, MySQL, Postgres, Mongo, etc.
Traditional Server-Side Rendering
Server-Side Rendering used to be the most common way used to build websites. There existed a web server that compiled everything, including the data and fully populated HTML page. Every time we needed to switch to another route, a request was sent to the server, which again populated the page with data and sent it back to the client. This approach had a huge disadvantage as the website felt slow and lacked a native feel. Django, Flask, etc. are server-side rendered.
Client Side Rendering
Figure: Client Side Rendering (Source)
This approach works really well with a good internet connection and the web application feels native. This is due to the fact that every time we switch routes, there aren’t repeated requests to the server. Instead, it is handled by the client. Frameworks like Vue and React use Client Side Rendering.
Universal or Isomorphic Apps
Figure: Universal Rendering (Source)
Client Side Rendering fares poorly with Search Engine Optimization because crawlers cannot read the entire page content due to the initial time-to-load. To solve this, there is an increasingly popular method of designing web apps called the Universal approach. This approach consists of both the client and server rendering pages. This approach solves the problem of SEO, while maintaining the snappy and fluid experience of a client side rendered application. Frameworks like Next and Nuxt use the isomorphic approach.
|Server Side Rendering||Client Side Rendering||Universal / Isomorphic|
|Search Engine Optimization||Good||Bad for SEO||Good|
|Reload during Route Switching||Yes||No||No|
|Needs a Server?||Yes||No||Yes|
|Native User Experience||No||Yes||Yes|
|Quick Initial Load||Yes||No||Yes|
As a web developer, it is important to choose an architecture according to the requirements of the application we are going to build. A good understanding of how each approach works and some development experience will help to become a better developer.