Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAs
Last updated
Last updated
The image illustrates a traditional server-side rendering (SSR) model for web development. In this approach:
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).
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.
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.
Page Reload: The client receives the new HTML page and replaces the entire page content, leading to a full page reload.
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.
Slow User Experience: Page reloads create a noticeable delay, interrupting the user flow and making the application feel sluggish.
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.
Poor User Experience: The constant page reloads can be jarring for users, especially on slower connections.
The old approach, while functional, is inefficient due to its reliance on full page reloads for every interaction. 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!
In a Single-Page Application (SPA), 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:
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.
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.
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 the JavaScript updates the DOM (Document Object Model) to reflect the changes, without reloading the entire page.
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.
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.
Faster Interactions: Since the entire page doesn't reload, interactions are much faster and more responsive. The user experience is smoother and more fluid.
Improved Performance: By offloading rendering and interaction logic to the client, the server's load is reduced, leading to better overall performance and scalability.
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.
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.
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.
