Single-page application

As explained in Django in Action

A single-page application is a web application that renders its interface and performs substantial application logic in the browser within a single web page.

A single-page application (SPA) puts interface rendering and much of the application logic in the browser. Rather than receiving a newly composed HTML page for each interaction, the browser downloads a JavaScript application that maintains a dynamic interface within one web page. section 1.2.1 section 11.1

The key distinction is where HTML is composed. Server-side rendering has the server assemble HTML with templates and send the result to the browser. An SPA sends browser code plus data; the browser creates and updates the interface. The browser still displays HTML either way—this is a division of responsibility, not a contest for who gets to use HTML. section 1.2.1

An SPA commonly divides work this way:

• The browser downloads a JavaScript bundle containing the user interface and substantial business logic. section 1.2.1
• The browser performs further user-interface interactions in place instead of navigating to separately generated pages. section 11.1
• The backend provides data and performs server-side work, often through an API that returns JSON. section 1.2.1
• Django views can serve API data rather than render HTML, with Django REST Framework or Django Ninja helping serialize ORM objects for JavaScript clients. section 1.2.1

An SPA is a design approach rather than a project type. Django can supply its backend while a browser frontend handles the GUI; the same API-oriented backend can also support mobile applications or other systems. A project can mix conventional web pages, APIs, and selective JavaScript interactivity rather than choosing a pure SPA everywhere. section 1.2.2 section 1.2.3 section 11.1

A JavaScript frontend with a Django API

React and Angular use the SPA mechanism: a JavaScript interface is downloaded once and then interacts with a backend API. Django can provide that API, while frameworks such as Django Ninja or Django REST Framework can make API creation quicker. Vue.js can also be used selectively on regular pages when a full SPA would be more machinery than the interaction needs. section 11.1 section 1.2.1 section 11.1

Figure 11.1 Mixing web and API interfaces allows Django to be a backend for multiple types of devices

Compare the possible frontend and API arrangements: Django can back web interfaces, mobile clients, and SPA-style browser interfaces at the same time. section 11.1

How Django in Action covers it

How deep it goes

Explains browser-versus-server rendering, JavaScript bundles, JSON APIs, and Django API tooling without implementing an SPA.

Examples

Uses React, Angular, Vue.js, Django REST Framework, Django Ninja, and mobile frontends as concrete architecture examples.

What it assumes

Teaches from zero the browser/server rendering split while relating it to MVC roles and Django views.

What you can do after

Evaluate/understand whether a browser-rendered SPA, a server-rendered site, or a mixed interface fits a Django project.

How it connects

Connects SPAs with server-side rendering, MVC, APIs, JSON, Django views, ORM serialization, and mobile applications.

liveBookmanning.com

Read Django in Action 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
  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.
• 

  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 Django in Action. The section links point to the parts of the book it draws on.