Quick Intro to Single-Page Applications

This is front-end topic #1, part of my series "Keep Up With Tech," learn more about it here.

Single-Page Applications (SPAs) are web apps that load all the necessary HTML, CSS, and JavaScript in the initial page load, and then dynamically update their DOM and retrieve extra data based on user interactions. SPAs give the users the illusion that they are accessing different pages or paths.

SPAs differ from the traditional approach of requesting new web documents from the backend servers based on user actions, sometimes called Server-Side Rendering (SSR), which reloads all assets at every user request - although some assets would be cached by the browser.

The intended benefit of SPAs over SSR is that only the needed assets, data, and images, are loaded as they are needed, and the page gets updated accordingly.

This saves bandwidth and loading time, and also because there is no page reload, the user interface and interactivity of SPA is a smoother experience compared to SSR, almost similar to a native app.

Check out the two diagrams below for a visual guide I made showing SPA vs. SSR.