Single-Page Applications (SPAs)

A Single-Page Application (SPA) is a web application that loads a single HTML page and dynamically updates the content without reloading the entire page. This approach provides a more fluid and responsive user experience, similar to native apps. SPAs are a dominant paradigm in modern web development.

The main drawbacks of SPAs include increased complexity, slower initial load times, and issues with SEO.

How SPAs Work

At the core of a SPA is client-side routing. When a user navigates to a different page within the application, the browser updates the URL in the address bar, while the content is dynamically rendered and updated using JavaScript. This is facilitated by the browser's History API.

Before the History API, developers commonly used the hash fragment (#) in URLs for client-side routing.

What happens when a user directly requests a page, say /orders? In this case, the server sends back a basic HTML skeleton. The browser then downloads and executes JavaScript, which allows the client-side router to load the appropriate component and render the content.

Using Frameworks

Most SPAs utilize a variety of tools, including a router (e.g., React Router), data-fetching abstraction (e.g., React Query), global state management (e.g., Redux), and a build pipeline/dev server (e.g., Webpack). This can be overwhelming for novice developers. Frameworks like Next.js or Remix can streamline this process for you.