Single & Multiple Page Application

There are two web application development approaches as SPA and MPA. If you are creating a web application, you will choose one of these approaches. It is critical that you understand these approaches and choose the best one for your work.

Let us consider Multi page application first, as it is a more traditional approach to web development.

MPA

It requires a page reload every time the content changes. Each new request would be sent to the server, and as a response, a new page would be sent back from the server (see Figure 1). For an instance, when you click a button or a link, you will be going to new page.

For example, if you are going for a dinner with group of friends, you may ask for a menu and order different food one by one. First you may get a drink, after that you will go through the menu again and order rice and curry. When you order food, you get it one at a time from the kitchen. With the multi page approach, you can get different pages from the server one at a time.

It is more suitable for e-commerce sites, learning management systems like Moodle where you have lot content and options to select.

Figure 1 – MPA Approach

Next, let’s consider about SPA approach.

SPA

A single page is a more modern approach to web development. It does not require page reloading during use (see Figure 2). As can be seen in Figure 2, when you click different links, part of the page is re-rendered, rather than fetching a new page as in MPA. It works inside a browser. That is, only one page will be fetched from the server, and no more pages will be fetched from the server after that. Also, when you click something, it will only change part of the page.

Let us consider the previous example again. Rather than ordering food one at a time, you can get your food from a buffet. You will get access to drinks, main dishes, and deserts all at once. You do not need to go through a menu and order food one by one. Similarly, in a SPA, the server loads the whole page, and you get all the data loaded automatically.