Single-page application model

Traditionally, in a web application, the client requests the server for a web page. Then, the server responds to the client with the requested HTML page after validating and authenticating the request, if necessary. The next request to the server might occur when a user hits some link on the page, submits a form, and so on. The server again processes the request and sends back the response with another HTML page.

Don't you think instead of getting the whole HTML page (which would be mostly the same look and feel as the last loaded page), we should just get the data we need and update the currently loaded page itself without posting back to the server? Yes, modern web development works in that regard. Today, we just need data from the server on demand using Ajax. After receiving the data, we will just update the UI with JavaScript or a client-side framework such as Angular.

This is what we call a single-page application (SPA). On the first request to the server, the server responds with the entire page for the app. Unlike traditional web apps, subsequent requests won't ask for an HTML page, rather they will ask for data using Ajax requests where the type of content is usually JSON. After getting data, the browser has to update only the portion of the page that has changed instead of reloading the entire page again. The SPA definitely improves user experiences by responding quickly to user actions on the same page because reloading the page takes away a user's attention for a moment.

However, implementing SPA is not so easy as we have to be sure that we are showing fresh data on the page whenever needed. Here, emerging technologies, such as ASP.NET Web API, and JavaScript frameworks, such as AngularJS and CSS3 come in handy when designing SPAs.

Your application can call different endpoints of the REST API to do certain tasks and update the UI after getting responses without reloading the page.