MPA (Multi-Page Application)
MPA (ang. Multi-Page Application, czyli Aplikacja Wielostronicowa) to klasyczny, tradycyjny model architektury stron internetowych, w którym każda podstrona serwisowa (np. strona główna, kategoria, karta produktu, kontakt) stanowi osobny, fizyczny dokument HTML.
Gdy użytkownik klika w odnośnik wewnątrz serwisu, przeglądarka wysyła zapytanie do serwera, po czym cała strona ulega przeładowaniu, pobierając od nowa kompletny kod HTML wraz z zasobami (arkuszami stylów CSS, skryptami JS i obrazami).
Jak działa technologia MPA?
Większość tradycyjnej sieci oraz popularne systemy zarządzania treścią (takie jak WordPress, PrestaShop czy Drupal) działają właśnie w oparciu o architekturę MPA i tzw. Server-Side Rendering (SSR):
-
Kliknięcie w link: Użytkownik wybiera nową zakłądkę lub produkt.
-
Zapytanie do serwera: Przeglądarka wysyła zapytanie HTTP/HTTPS o konkretny adres URL.
-
Generowanie po stronie serwera: Serwer wykonuje kod (np. w PHP, Pythonie czy Ruby), odpytuje bazę danych i składa pełny plik HTML dla żądanej podstrony.
-
Przeładowanie i wyświetlenie: Przeglądarka czyści dotychczasowy widok i renderuje odebrany od zera dokument HTML.
Zalety i wady architektury MPA
Zalety:
-
Naturalna przyjazność dla SEO (Out-of-the-Box): Każda podstrona posiada unikalny adres URL, dedykowaną sekcję
<head>(z unikalnymi nagłówkami, opisami i danymi ustrukturyzowanymi) oraz wyrenderowany kod HTML, co umożliwia bezproblemowe indeksowanie przez roboty Googlebot bez konieczności stosowania skomplikowanych technologii. -
Proste skalowanie struktury treści: Łatwe dodawanie nowych kategorii, tysięcy produktów czy wpisów blogowych bez ryzyka przeciążenia pamięci RAM przeglądarki użytkownika.
-
Łatwe wdrożenie analityki: Tradycyjne narzędzia analityczne (np. Google Analytics 4) natychmiast wyłapują odsłony (pageviews) przy każdym przeładowaniu strony.
Wady:
-
Przeładowanie przy każdej akcji: Widoczne „mruganie” ekranu i konieczność ponownego pobierania powtarzających się elementów interfejsu (np. nagłówka, menu czy stopki), co wpływa na wrażenia użytkownika (UX).
-
Większa zależność od wydajności serwera: Każda akcja wymaga reakcji serwera, przez co niski wskaźnik TTFB lub obciążenie bazy danych bezpośrednio przekłada się na wolne działanie strony.
MPA vs SPA (Multi-Page vs Single-Page Application)
| Cecha | MPA (Multi-Page) | SPA (Single Page) |
| Struktura | Wiele osobnych dokumentów HTML | Jeden plik HTML, treść podmieniana przez JS |
| Przeładowanie | Pełne przeładowanie przy każdym kliknięciu | Brak przeładowania (dynamiczna podmiana danych) |
| SEO | Proste i naturalne bez dodatkowej konfiguracji | Wymaga SSR, SSG lub prerenderingu |
| Środowisko renderowania | Głównie po stronie serwera (SSR) | Głównie po stronie przeglądarki (CSR) |
| Główne zastosowanie | Sklepy e-commerce, portale, blogi, serwisy informacyjne | Aplikacje SaaS, edytory, panele użytkownika, social media |
