Multipage application definition: examples, advantages and more

A multipage application or ‌MPA, is a web app made up of multiple HTML pages. Unlike single-page applications (SPAs), here, every user action opens a new page in the browser, be it a clicking on a product or a form submission.

While MPAs might look a little less seamless than an SPA, ‌they're highly effective for heavy applications which are large and have easily bookmarkable pages. Though they might have slower transitions between pages, they’re useful for news and ecommerce applications, allowing users to easily find and interact with specific content.

Here are 3 examples of MPAs:

1. Ecommerce websites - platforms like Amazon and eBay, use MPAs to load different product pages, category pages and checkout processes separately. This makes each page easily searchable.
2. News websites - sites like CNN and The New York Times are MPAs, where each article, section and search result is a separate page, improving readability and SEO.
3. Government portals - websites used for revenue services by the government use MPAs to provide clear, structured information and services, with each form or information page loaded independently.

Here’s a detailed explanation of how a multi-page application (MPA) works:

Initial page load

When you first visit a website, your browser sends a request to the server for the initial page. The server retrieves the home page and sends it back to your browser as a complete HTML document. Your browser then reads this document and shows the home page on your screen, with all the text, pictures‌ and layout.

Clicking a link

Once the home page is displayed, you might see various links or buttons that allow you to navigate to other pages, such as a "Products" link or a "Contact Us" button. When you click on one of these links, your browser asks the server for the page you want to see.

Server processing

The server receives your request and processes it. It might need to get data from a database. Once the server has all the information it needs, it makes a new HTML file for that page. This document includes all the content and structure needed to display the page correctly, such as product descriptions, images‌ and layout.

Full page reload

After the server has created the new HTML document, it sends it back to your browser. Your browser then reloads the entire page, replacing the current content with the new one. This means that everything on the screen, including the header, footer‌ and main content, is refreshed. This can take a while, but it makes sure you see the most up-to-date and complete information for the new page.

URL update

As the new page loads, the URL in your browser's address bar changes to reflect the new page. For example, if you were on the home page and then clicked on "Products," the URL might change from ’www.example.com’ to ‘www.example.com/products’.

This update is important because it allows you to bookmark or share the specific page you're on, making it easy for others to access the same content directly.

The key components of an MPA are separate HTML pages, a server to process and serve them, a client-side browser to display and interact with them, navigation links and unique URLs for each page. Here’s a brief explainer of each of these key components of a MPA:

HTML pages

Each page in an MPA is a separate HTML document. These documents show the structure and content of the web page. They also tell what the user sees and interacts with on each page, including text, images and layout.

Server

A server is a computer or system that stores and processes web pages and their data. When a user asks for a page, the server gets the right HTML document and sends it to the user's browser.

Client-side browser

The client-side browser is the web browser you use to view and interact with the web pages, such as Chrome, Firefox‌ or Safari. The browser receives the HTML documents from the server, interprets them‌ and displays the content to the user.

Navigation links

Navigation links are the buttons, menus‌ and hyperlinks on a web page that allow users to move to other pages. When a user clicks on a navigation link, the browser sends a new request to the server for the linked page. This triggers the server to send a new HTML document, which the browser then loads and displays.

URLs

URLs or Uniform Resource Locators are the web addresses that uniquely identify each page on the internet. Each page in an MPA has its own URL. When a user navigates to a new page, the URL in the browser's address bar changes to reflect the new page.

While MPAs don’t have the ease of use as SPAs, they certainly have their pros:

1 - Better load speed

MPAs have the advantage of faster initial load times. Unlike SPAs, which load most of their content upfront, MPAs load only the content required for the specific page the user is visiting. This approach reduces the strain on the browser during the initial load, providing a quicker experience for users accessing the app for the first time.

2 - Better SEO

This is one of the main advantages of choosing MPAs over SPAs. Each page in an MPA has a unique URL and can be indexed independently, allowing different sections of the site to rank separately in search results.

This structure makes MPAs an excellent choice for businesses focused on driving organic traffic through SEO, such as ecommerce websites or blogs.

3 - Compatible with old browsers

MPAs are highly compatible with older browsers and legacy systems, making them ideal for audiences using a wide range of devices and platforms. In environments where users might not have access to the latest technology, such as corporate intranets or public sector systems, this compatibility is invaluable.

4 - Secure

Since MPAs use a traditional architecture where each request is processed and rendered server-side, it’s easier to implement secure authentication and authorisation protocols. Each page request undergoes its own security checks, making the app less vulnerable to attacks, which are more prevalent in SPAs due to their dynamic content rendering.

Compared with SPAs, MPAs have performance issues as they have multiple pages.

1 - Slower speed and performance

One of the biggest drawbacks is their performance during user interactions. Since every click or action requires a full page reload, the user experience can feel clunky and outdated compared to the smooth, app-like functionality of SPAs.

This constant reloading not only slows down navigation but also interrupts the user’s flow, making MPAs less suitable for highly interactive applications like social networks or real-time dashboards.

2 - Complex to develop and scale

Development and maintenance are also more complex with MPAs. Each page must be designed, developed and managed separately, leading to a larger codebase and longer development timelines.

This complexity also extends to the back-end, where more intricate server-side logic is required to handle the individual requests for every page.

3 - Higher server load

Since each user interaction generates a separate request to the server, the back-end must handle a constant influx of demands, especially on high-traffic sites. This can result in slower response times and the need for a more robust server infrastructure to maintain performance under heavy loads.