Multi Page Application
Introduction
A Multi-Page Application (MPA) is a traditional web application that consists of multiple separate pages, with each page being loaded in full when a user navigates to it. MPAs are typically built using server-side technologies such as PHP, Ruby on Rails, or .NET, and rely on server-side rendering to generate HTML that is sent to the browser.
Each page in an MPA is a self-contained unit that operates independently of the other pages, and navigation between pages involves making a full round trip to the server. This can result in slower page load times, as the entire page must be reloaded every time the user navigates to a new page.
This article constitutes a component of a comprehensive collection of web architecture pattern references.
Single Page Application Frontend
Backend for SPA and Mobile App (Managed Services)
Backend for SPA and Mobile App (Serverless)
Multi Page Application (Integrated Web)
Single Page Application with Worker Process
How it works
Multi-page application (MPA) is a type of web application that consists of multiple pages served from a server to a client’s web browser, where each page is a distinct URL. These pages are generated dynamically on the server-side and then rendered on the client-side, with each page request triggering a round-trip to the server.
When a user requests a page, the server responds with the HTML, CSS, and JavaScript necessary to render the page, which is then displayed in the user’s web browser. Navigation between pages is achieved by the user clicking on links or by JavaScript code dynamically updating the URL and triggering a new page request to the server.
Components
The main components of a Multi-page application (MPA) are:
-
Server: A server that runs a server-side language, such as PHP, Node.js, or Ruby, and is responsible for handling HTTP requests and generating dynamic content.
-
Client: A web browser that displays the dynamic content generated by the server, such as HTML, CSS, and JavaScript.
-
Router: A component that handles navigation between pages and updates the URL to reflect the current page.
-
HTML, CSS, and JavaScript: The technologies used to create the user interface and dynamic behavior of the pages.
-
Database: A database that stores the application’s data, such as user information, product catalog, and order history. The server accesses this data to generate dynamic content for each page.
-
APIs: Interfaces that allow the server and client to exchange data, such as REST APIs that enable the client to retrieve data from the server and send data to the server.
These components work together to provide the user with a seamless experience as they navigate the application, with each page request triggering a round-trip to the server and a rendering of the updated content in the client’s web browser.
Architecture
All the above components are served from a single application
- Multi Page Application
- Persistent Data Storage (SQL/NoSQL Databases)
Backend
There are different solutions and services to host the MPA Backend on cloud, here are some of the popular:
- VM (eg: EC2)
- Container Services (eg: ECS)
- Managed Services (eg: Elastic Beanstalk)
- Serverless (eg: Lambda)
- Kubernetes (eg: EKS)
Among the above list, we’re covering only Managed Services.
Managed Services
Using managed services like Amazon Web Services (AWS) Elastic Beanstalk and Microsoft Azure App Service provides several benefits, including:
-
Simplified deployment and management: Managed services take care of infrastructure management and deployment, allowing developers to focus on writing code and delivering features.
-
Automated scaling: Managed services automatically scale application instances based on demand, providing high availability and performance without manual intervention.
-
Reduced operational overhead: By outsourcing infrastructure management, organizations can reduce operational overhead and focus on delivering value to their customers.
-
Improved security: Managed services provide built-in security features, such as automatic patching and secure data storage, reducing the security burden on organizations.
-
Easy integration with other services: Managed services integrate seamlessly with other services, allowing organizations to leverage the full suite of cloud services to build and deploy their applications.
-
Cost-effectiveness: Managed services offer a cost-effective solution for deploying and managing applications, with flexible pricing models and the ability to pay for only the resources used.
-
Global availability: Managed services are designed to be globally available, providing fast and reliable access to applications from anywhere in the world.
