Single-Page Application (SPA)

A Single-Page Application (SPA) is a web application that interacts with the user by dynamically rewriting the current web page with new data from the web server.

• Context:
  • It can (typically) manage the navigation to different pages using routes.
  • It can be designed such that a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.
  • ...
  • …
• Counter-Example(s):
  • the default method of a web browser loading entire new pages.
• See: CSS, Web Application, Website, Web Design, Web Server, Web Browser, User Experience, Native (Computing), Application Software, HTML, JavaScript.

---

---

References

2022

• (Wikipedia, 2022) ⇒ https://en.wikipedia.org/wiki/Single-page_application Retrieved:2022-11-21.
  • A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

    In a SPA, a page refresh never occurs; instead, all necessary HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

2017

• https://stackoverflow.com/q/47251553
  • QUOTE:
    • Question: In Single page application like web application using Angular 2, we manage the navigation to different pages using routes. But when page is refreshed in browser then entire application is getting refreshed. This causes the data being lost (e.g. the values retrieved from service).

      I know we can store the data in localstorage/cookies and use that data during loading of any route but is any better way to maintain the application data on page refresh or handling this kind of scenarios?

    • Answer: You can use localstorage, session storage and Cache other than these api you can't store your data in browser.

      There is one more way but it comes with security concern, If your data is small and does not confidential you can have it in URL. [1]

---