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.
  • It can improve performance by reducing the amount of data that needs to be reloaded, resulting in faster interactions and a smoother user experience.
  • It can use Web Application Frameworks, such as: React.js, Angular.js, and Vue.js.
  • It can incorporate server-side rendering (SSR) or static site generation (SSG) to improve SEO and initial load performance.
  • It can be vulnerable to certain security risks, such as cross-site scripting (XSS), due to the client-side execution of code.
  • ...
• Example(s):
  • Gmail Web App, which is based on a JavaScript framework, uses AJAX to fetch data asynchronously, Client-side rendering to avoid full-page reloads, App caching for offline functionality, and Lazy loading.
  • Netflix Web App, which uses React.js and employs a Virtual DOM for efficient app updates, along with a Component-based architecture and Lazy loading.
  • Facebook News Feed, which utilizes AJAX for data fetching, Infinite scrolling to dynamically load content, and Client-side rendering to improve user interaction without full-page reloads.
  • Google Maps Web App, which leverages AJAX and Dynamic content loading for real-time updates and interactions, along with Client-side rendering to maintain a responsive user interface.
  • Salesforce Web App, which uses SPA architecture for real-time data updates, a Component-driven UI for flexibility, and Client-side rendering to provide a responsive user experience.
  • Trello Web App, which implements Drag-and-drop functionality using Client-side JavaScript, along with Real-time synchronization to reflect updates instantly without full-page reloads.
  • Dropbox Web App, which utilizes SPA architecture for efficient data synchronization and Client-side rendering to facilitate responsive file management and collaboration.
  • Asana Web App, which features Real-time collaboration using SPA principles, with Client-side rendering and dynamic task management for a seamless user experience.
  • Zendesk Web App, which leverages SPA technology for Dynamic ticket handling, Real-time updates, and Client-side rendering to streamline customer service operations.
  • ...
• Counter-Example(s):
  • one based on entire new page reloading.
  • Mobile App.
• 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]

---