TIL: Why Does a SPA Have Multiple URLs? 🤔

What is SPA

• A Single Page Application (SPA) is a web application that interacts with the user by dynamically rewriting the current page, rather than loading entire new pages from the server.
• Antonym: Multi-Page Application (MPA), where each page load requires a server request.

Why Does a "Single Page" Have Multiple URLs?

• Even though a SPA is designed as a single page, it often mimics traditional multi-page behavior by updating the browser's URL dynamically.
• This dynamic URL change serves multiple purposes:
  • Enabling features like bookmarking, deep linking, and maintaining browser history for a better user experience.
  • Treating URL changes as events to trigger application state updates and screen re-renders.

How Does a "Single Page" URL Change?

• SPAs use the History API—specifically, methods like history.pushState() and history.replaceState()—to update the URL without reloading the page.

Why Doesn't a Page Reload Work in SPAs?

• A page reload in a SPA results in a request to the server for the current URL, which often leads to a 404 error unless the server is configured to handle SPA routing (e.g., serving the SPA's index.html for all routes).
• To avoid this issue, developers use tools like client-side routing (e.g., React Router) and server-side configuration to properly handle SPA routes.

Reference

https://qiita.com/ozaki25/items/41e3af4679c81a204284