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
Top comments (0)