Wat is een Multi Page Application?

Wat is een Multi Page Application (MPA), het antwoord: een MPA is een web applicatie met meerdere pagina's waarbij de server bij elke pagina wordt aangeroepen, om dynamisch de HTML te genereren.

MPA is een backronym: een afkorting die later is verzonnen toen het Single Page Application (SPA) model opkwam. Een SPA bouwt zijn UI op in JavaScript een MPA in HTML.

Met het Application gedeelte bedoeld men dat het primaire doel van de eindgebruiker het uitvoeren van een set taken / processen is.

Hoe werkt een MPA?

Bij Multi Page Application koppel je een URL aan HTML (en natuurlijk ook CSS en JavaScript). Dit is zoals het web ontworpen is, de MPA is dus de originele vorm van het web, en is dus ouder dan de SPA.

Bij een MPA zal per per URL / pagina de back-end HTML naar de browser sturen.

De HTML word dynamisch gegenereerd op basis van data in een database, in combinatie met de gebruiker. De ene gebruiker ziet mogelijk op basis van rechten iets anders op een pagina dan een andere gebruiker.

Schematisch ziet dat er als volgt uit:

Moderne MPA vs klassieke MPA

Je hebt twee soorten MPA's modern en klassiek.

Een klassieke MPA spugt voor elke pagina alle HTML en CSS uit. Er zijn legio web frameworks / talen die gebaseerd zijn op de klassieke MPA. Denk aan python in combinatie met django, java met spring met thymeleaf, of PHP met twig.

Wat doet een moderne MPA dan anders:

• Gebruikt JavaScript om navigatie tussen pagina's sneller te laten voelen, door delen van de pagina intelligent te hergebruiken.

• Gebruikt misschien de View Transition API om een animatie te tonen tussen verschillende pagina's. Dit voelt dan weer aan als een SPA.

• Gebruikt prefetching om resources een prioriteit aan te geven. Dit geeft dan weer een boost aan de performance.

• Laad alvast de volgende pagina in zodat pagina navigates sneller voelen. Dit kan gebeuren als: de gebruiker over een link hovered, of een link in "beeld" komt, of alleen gebeuren bij bepaalde links.

In het grotere web frameworks eco-systeem zie je dat allerlei projecten bezig zijn om deze vernieuwde vorm van de MPA te omarmen. Verschillende web frameworks zijn bezig het voor ons als developers het zo makkelijk mogelijk te maken!

In front-end webframework land:

• svelte heeft sveltekit

• vue heeft nuxt

• react heeft Next.js en @tanstack/start

Een moderne MPA primair op HTML en gebruikt JavaScript secondair waar nodig. Het gebruik van JavaScript daar zijn front-end web frameworks goed in... en daarom integreren ze zo goed in dit nieuwe MPA model.

Dit werkt omdat veel front-end frameworks zoals het je toestaan om delen van je applicatie statisch te maken, en delen dynamisch. Voor de statische delen (zonder gebruikers interactie / knoppen) sturen we HTML, voor de dynamische delen eerst HTML en ook wat JavaScript om het interactief te maken.

Hier is een voorbeeld van hoe dat zou werken:

Wat is het verschil tussen een MPA en een SPA?

Een Single Page Application (SPA) heeft een simpeler model qua hosting / deployment dan een MPA. Je hebt bij een SPA geen runtime nodig zoals die een programmeer taal snapt zoals C#. Python, PHP, Java of Ruby. Je hebt aan een Content Delivery Network (CDN) of een web server zoals nginx of apache voldoende.

Bij een MPA heeft je server wel een runtime nodig want je wilt dynamisch de HTML genereren. Je hebt in die server dus een extra bewegend onderdeel.

Qua SEO wint de MPA het van de SPA. De reden is dat zoekmachines zoals Google beter een pagina kunnen indexeren als deze bestaat uit HTML. Een SPA bouwt zijn pagina op vanaf JavaScript en dit eist dat een webcrawler ook JavaScript snapt.

Bij Google hebben ze wel speciale premium crawlers die JavaScript snappen, maar dit zijn er in vergelijking met de HTML only crawlers veel minder!

MPA en React

Als je graag een MPA in React wilt maken, zodat je stukken content in je applicatie kan zetten die door zoekmachines gevonden kunnen worden. Raad ik aan dat je de volgende pagina leest: