Old and new methods of data flow in SPA

In the traditional flow of serving requests, the order looks like this:

1. The client requests a web page from the server
2. The server authenticates and returns a rendered response
3. Every rendered response is in HTML with embedded data

With SPAs, however, the flow is quite different:

1. Request the HTML templates with the browser in one single go
2. Then, query the JSON REST API to fill a model (the data object)
3. Adjust the UI according to the data in the model (in JSON)
4. From the browser, push back the changes to the server via an API call

In this way, communication happens only in the form of the REST API. The client takes care of logically representing the data. This causes systems to move from Response-Oriented Architecture (ROA) to Service-Oriented Architecture (SOA). Take a look at the following diagram:

SPAs reduce bandwidth usage and improve site performance. SPAs are a major boost for API-centric server development because now a server can satisfy requirements for both browser and API clients.