Single-page application

As explained in ASP.NET Core in Action, 3e

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

A single-page application (SPA) loads its client-side application into the browser and updates the interface dynamically instead of requesting complete HTML pages for most interactions. Frameworks such as Angular, React, and Vue commonly use JavaScript to generate the visible HTML. section 5.1

A typical SPA interaction works in two stages:

• The browser initially downloads the JavaScript application, which initializes the SPA. section 5.1
• The initialized application requests data from the server, usually as JSON, then generates the HTML shown to the user. section 5.1
• The server endpoint providing this data may be called an HTTP API, JSON API, or REST API, depending on its design. section 5.1

Blazor WebAssembly provides a C# and Razor alternative to JavaScript-based SPAs by running in the browser through WebAssembly. Blazor Server offers a related experience by rendering on the server and sending events and updates over WebSockets. section 5.1 section 1.2

Figure 5.2 A sample client-side SPA using Blazor WebAssembly. The initial requests load the SPA files into the browser, and subsequent requests fetch data from a web API, formatted as JSON.

Trace the initial download of SPA files and the subsequent JSON requests to a web API. section 5.1

How ASP.NET Core in Action, 3e covers it

How deep it goes

Describes initialization, JSON communication, and client-side HTML generation without detailing framework internals.

Examples

Uses Angular, React, Vue, Blazor WebAssembly, initial JavaScript files, and JSON responses as examples.

What it assumes

Assumes basic web-browser and server communication concepts while distinguishing SPAs from server-rendered applications.

What you can do after

Evaluate/understand how browser applications load, communicate with servers, and generate updated interfaces.

How it connects

Connects single-page applications with HTTP APIs, JSON, WebAssembly, JavaScript frameworks, and server-rendered applications.

liveBookmanning.com

Read ASP.NET Core in Action, 3e 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
  React Quickly, Second EditionA single-page application is a web application that dynamically updates its interface in the browser 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 ASP.NET Core in Action, 3e. The section links point to the parts of the book it draws on.