Single-page application

As explained in React Quickly, Second Edition

A single-page application is a web application that dynamically updates its interface in the browser without full-page navigation for most interactions.

A single-page application (SPA) is a website with substantial functionality running in the browser. The browser acts as a thick client: it renders HTML, validates input, and changes the interface, while a thin client mainly displays server-rendered information. React can supply the UI layer, but a complete SPA usually combines React with additional technologies such as routing, state management, and a backend. section 1.3.1 section 1.3

A typical SPA interaction follows this browser-server sequence:

• The user enters a URL, and the browser requests the application from a server. section 1.3.1
• The server returns static assets such as HTML, CSS, and JavaScript, often with a bare-bones page and a loading indicator. section 1.3.1
• Application code requests data, which may arrive as JSON, XML, or another format. section 1.3.1
• The browser uses the received data to render the missing interface, injecting data into templates; this process is also called hydration. section 1.3.1

Interactive browser applications

Facebook, Google Docs, and Gmail illustrate the SPA category because they provide substantial functionality directly in the browser. Typical actions include clicking buttons, dragging and dropping, and hovering, with the browser responsible for UI changes. section 1.3.1

Figure 1.3 A generic SPA architecture

Use the architecture figure to trace the user, browser, server, static assets, data requests, and rendered interface as one end-to-end flow. section 1.3.1

How React Quickly, Second Edition covers it

How deep it goes

Maps the request-to-render flow and contrasts thick and thin clients, but stops short of detailed implementation.

Examples

Uses Facebook, Google Docs, Gmail, button clicks, dragging, hovering, JSON, XML, and loading screens as examples.

What it assumes

Starts with websites, browsers, servers, static assets, and data requests before positioning React in the stack.

What you can do after

Evaluate React's role in an SPA stack and distinguish a browser-heavy client from a thin client.

How it connects

Connects single-page applications with React, React Router, Redux, hydration, client-side rendering, and server-rendered websites.

liveBookmanning.com

Read React Quickly, Second Edition on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  Build a Frontend Web Framework (From Scratch)A web application that updates its displayed content and navigation within one initially loaded document rather than requesting a new page for each route.
• 

  liveBookmanning.com
  Django in ActionA single-page application is a web application that renders its interface and performs substantial application logic in the browser within a single web page.
• 

  liveBookmanning.com
  Modern AngularA single-page application is a web application that loads a single document and updates its displayed content through client-side code during navigation.
• 

  liveBookmanning.com
  ASP.NET Core in Action, 3eA single-page application is a web application that updates its user interface dynamically without full-page navigation for most interactions.

Compare how 5 books explain single-page application →

Related concepts

• server-side renderingcontrasts with · A web-rendering technique in which a server generates a user interface’s markup or other rendered representation before delivering it to a client.
• multi-page appcontrasts with · A multi-page application is a web application whose navigation loads separate HTML documents for different routes or views.
• JavaScriptuses · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
• routinguses · Routing is the selection of a path, destination, or processing component to direct an item, request, or flow toward an intended endpoint.
• web applicationkind of · A web application is software that provides functionality through web technologies and is accessed by users through a browser or other web client.

This explainer was generated by Manning's knowledge graph from the text of React Quickly, Second Edition. The section links point to the parts of the book it draws on.