Single Page Apps require extra considerations to correctly manage the ad lifecycle.
What counts as a Single Page App?
The line between SPAs and tradition websites is often blurry, as modern web development practices may combine aspects of both approaches. Single page apps typically have the following characteristics:
Page Navigation / Refresh
In a traditional website, when a user navigates from one page to another, the browser sends a request to the server, and the entire page is refreshed. This results in a visible delay and a loss of current page state. SPAs, on the other hand, load the initial page and subsequent interactions occur within the same page, without full page reloads. Only the necessary data is fetched from the server, and the SPA dynamically updates the content without refreshing the entire page.
See Handling user navigation for more information.
Rendering
Traditional websites often rely on server-side rendering (SSR) where the server generates the complete HTML page and sends it to the client's browser. SPAs primarily use client-side rendering (CSR) where the initial HTML is loaded along with JavaScript and subsequent rendering is done on the client side. The JavaScript framework or library, such as React, Vue or Angular, handles the rendering process.
State Management
SPAs often implement client-side state management using frameworks like Redux, Vuex or the built-in state management solutions of JavaScript frameworks. This allows the application to maintain and manage the state and lifecycle of various components. In contrast, traditional websites rely on server-side session management or cookies for maintaining state
API Interaction
SPAs typically communicate with the server through APIs. Instead of fetching entire HTML pages, SPAs make API calls to retrieve data in JSON format, and then update the DOM dynamically based on the received data.
Frameworks
Single Page Apps typically use a framework such as React, VueJS, or Angular. However, this is only one indication. It is possible to create a SPA without a framework, and it is possible to use a framework without creating an SPA.