A Journey Through Time: The History of Web Applications

Modern web applications are often built as Single Page Applications (SPAs). But if we look back at the history of web development, things were quite different.

In the past, web applications rendered all their content on the server-side. This meant the server sent fully prepared HTML, CSS, and JavaScript files to the browser for each request. The browser would then display the content by rendering these files.

A great example of this approach, which still exists today, is Wikipedia. When you visit Wikipedia, all the content for the requested page is loaded upfront. If you disconnect your internet after the page loads, you'll still be able to view the content because everything, including the HTML, CSS, and JavaScript, has already been delivered to your browser.

However, server-rendered applications like this come with some downsides:

1. Memory Usage: These apps often consume more memory, which can lead to slower device performance, especially on resource-constrained devices.
2. Performance Bottlenecks: Every time you navigate to a new page, the browser makes a new request, and the server sends the entire page again, resulting in slower load times compared to modern SPAs.

In contrast, modern SPAs work differently:

• When you visit an SPA, the server sends a minimal HTML file along with bundled JavaScript and CSS files.
• The browser uses these files to dynamically render content on the page, often fetching additional data via APIs without refreshing the whole page.
• This reduces the load on devices and servers, making the experience smoother and faster.

To understand how traditional server-rendered apps work, think of the process like this:

1. The server receives the URL of the page you want to visit.
2. It processes the request and sends the full set of files (HTML, CSS, JS) to the browser.
3. The browser interprets these files to generate the content you see on the screen.
4. In these apps, the server doesn’t directly send the content you see. It sends the files required to create that content. The browser is responsible for converting those files into the visual layout and interactions on the webpage.