Single Page App Vs Multi Page App

Single Page App (SPA) Vs Multi Page App(MPA)

SPA : Only a part of the web page is updated on every request not the whole page i.e. a component based architecture comes in handy which helps in replacing the existing components on UI with the requested one.

How can you check this?

Go to angular.io-> press f12->navigate to any link on the same domain-> then you observe only certain parts of the page(as highlighted in the below image) is updated using some tags and they are called components.
The whole page will not be refreshed.

Also the javascript, HTML, CSS files will be downloaded once and remain there.

Examples:

angular.io, Slack web App, etc..

• These pages are more responsive to user.
• This decouples the front end with the server side programming languages.
• Javascript is mandatory on the browsers to run these applications.
• SEO is not easy to implement because each page will not have the title and meta tag (which describes what the page is about) and everything (components as shown above) will be embedded in base HTML page i.e. Index.html

MPA: Whole Web Page is refreshed on every request not the whole page.

How can you check this? 

Go to Lynda.com -> press f12->navigate to any link on the same domain.

You observe that whole page gets refreshed keep an eye on the browser refresh icon it will be shown as loading wheres in SPA this button will not be affected.

Examples:

Indian Express, Lynda.com, etc..

• These pages are not so responsive to user.
• Here the front end is tightly coupled with the server side programming languages.
• Javascript is not mandatory on the browsers to run these applications if they don't use it to develop the application.
• SEO is more optimized and can be easily implementable because each page will have title and meta tag which is used by crawlers to search for the keywords which is not case with the SPA's.