> For the complete documentation index, see [llms.txt](https://reactjs.koida.tech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://reactjs.koida.tech/react-fundamentals/lesson-1-understanding-old-vs-new-way-of-building-web-apps-spas.md).

# Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAs

## Overview

<figure><img src="/files/86qkTo1ZYBUw1mkbIbDU" alt=""><figcaption></figcaption></figure>

## Old Approach

<figure><img src="/files/DQgZlpQBQEW0aGHdsW9L" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/dKvhyEQ0jroHA5lx9dUG" alt=""><figcaption></figcaption></figure>

### **Description of the Old Approach**

The image illustrates a <mark style="color:orange;">**traditional server-side rendering (SSR)**</mark> model for web development. In this approach:

1. **Server-Side Rendering:** Whenever a user requests a web page, the server generates the entire HTML, CSS, and JavaScript for that page and sends it to the client (browser).
2. **Client-Side Interaction:** If the user interacts with the page (e.g., clicks a button, submits a form), the browser sends a request back to the server.
3. **Server-Side Processing and Rendering:** The server receives the request, processes it (e.g., updates data, performs calculations), and then renders a **new, complete HTML page** to send back to the client.
4. **Page Reload:** The client receives the new HTML page and **replaces the entire page content**, leading to a full page reload.

### **Inefficiencies of the Old Approach**

1. **Unnecessary Data Transfer:** With each interaction, the server sends the entire HTML page, even if only a small part of the page needs to be updated. This leads to redundant data transfer and increased network traffic.
2. **Slow User Experience:** Page reloads create a noticeable delay, interrupting the user flow and making the application feel sluggish.
3. **Performance Bottleneck:** As the application grows in complexity, the server's workload increases with each interaction, potentially leading to performance bottlenecks and slower response times.
4. **Poor User Experience:** The constant page reloads can be jarring for users, especially on slower connections.

### **In Summary:**

The old approach, while functional, is inefficient due to its reliance on <mark style="color:purple;">**full page reloads for every interaction**</mark>. This results in unnecessary data transfer, slow user experience, and potential performance issues.

Let me know if you'd like to explore more about modern approaches like Single-Page Applications (SPAs) that address these inefficiencies!

## Modern Approach -SPA

<figure><img src="/files/0omV9IBd1ahxq0OOu5Cg" alt=""><figcaption></figcaption></figure>

### **Description of the Modern Approach (SPA)**

In a <mark style="color:orange;">**Single-Page Application (SPA)**</mark>, the core idea is to load a single HTML page initially, and then dynamically update portions of that page as the user interacts with the application. Here's a breakdown:

1. **Initial Page Load:** The server sends an initial HTML page with the necessary JavaScript and CSS files. This page contains the basic structure of the application.
2. **Client-Side Rendering:** The JavaScript code takes over and handles most of the rendering and interaction. It uses APIs to fetch data from the server in a lightweight format like JSON.
3. **Dynamic Updates:** When the user interacts with the application (e.g., clicks a button, submits a form), the JavaScript code makes AJAX requests to the server. The server responds with the necessary data, and <mark style="color:orange;">the JavaScript updates the DOM (Document Object Model) to reflect the changes</mark>, without reloading the entire page.
4. **DOM Manipulation:** JavaScript directly manipulates the HTML elements on the page to update content, display new elements, or change their styles. This allows for smooth and interactive user experiences.

### **Why the Modern Approach is Efficient**

1. **Reduced Data Transfer:** Instead of transferring entire HTML pages, only the necessary data (often in JSON format) is exchanged between the client and server. This significantly reduces network traffic.
2. **Faster Interactions:** Since the entire page doesn't reload, interactions are much faster and more responsive. The user experience is smoother and more fluid.
3. **Improved Performance:** By offloading rendering and interaction logic to the client, the server's load is reduced, leading to better overall performance and scalability.
4. **Enhanced User Experience:** SPAs offer a more engaging and interactive experience, as the application feels more like a native app rather than a traditional web page.
5. **Backend Responsibility:** The backend focuses on providing data and handling business logic, while the frontend handles presentation and user interaction. This clear separation of concerns leads to better maintainability and scalability.

### **In Summary:**

The modern SPA approach offers several advantages over traditional server-side rendering. By minimizing data transfer, reducing page reloads, and leveraging client-side rendering, SPAs provide a faster, more responsive, and engaging user experience.