Wat is een Single Page Application?
Wat is een Single Page Application (SPA), het antwoord is een web pagina die vanuit de client kant (lees browser) via JavaScript de content bepaalt, en wijzigt.
Met het Application gedeelte bedoeld men dat het primaire doel van de eindgebruiker het uitvoeren van een set taken / processen is.
Hoe werkt een SPA?
Als eerste bestaat een SPA uit een klein stukje HTML die zo snel mogelijk een stuk JavaScript inlaad. Vervolgens zal via JavaScript alle content ingeladen worden. Veelal wordt dit gedaan met een client side framework zoals react.
Zie hier een voorbeeld van een index.html van een SPA:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>SPA app</title>
</head>
<body>
<noscript>
Je hebt JavaScript nodig om deze app te gebruiken.
</noscript>
<!-- Het script hier zal de content van de pagina inladen -->
<script type="module" src="/src/index.tsx"></script>
</body>
</html>Vervolgens is het de bedoeling dat alle navigaties client side in de browser via JavaScript af te vangen. Dit is ook de reden waarom het een single page (één pagina) application genoemd word.
Dit kan in een browser omdat het mogelijk is de URL / de adresbalk aan te passen vanuit JavaScript. Het is daarom belangrijk om een router te gebruiken, zodat je de adres balk makkelijk kan managen.
Let op: disabled de gebruiker zijn JavaScript dan ziet je een blanco pagina! Google heeft hier qua SEO ook last van zie zie SPA en SEO later op deze pagina.
De User Interface van een SPA komt meestal van een front-end framework zoals react. De data komt vaak uit een back-end die JSON uitspugt. De back-end is dan ook vaak of een REST of GraphQL API.
SPA en SEO
Een SPA is af te raden wanneer Search Engine Optimization (SEO) belangrijk is. Wil je gevonden worden in Google dan is een SPA niet handig.
Een aantal jaar geleden heeft Google bekend gemaakt dat ze minder / geen moeite gingen stoppen in het indexeren van SPA's. De reden hiervoor is het volgende:
Het crawlen van een webpagina waar JavaScript aan staat kost Google meer geld. Dit komt omdat een crawler JavaScript moet parsen / uitvoeren en dan moet wachten tot de content er is. De crawler moet een soort headless browser zijn.
Een headless browser is een browser zonder "scherm", die dus geen tijd verspilt aan het tekenen van elementen.
Een crawler die alleen HTML inslurpt is veel simpeler. Er is geen complexe headless browser nodig. Plus de crawler hoeft niet zo snel te wachten.
Kortom het is voor Google simpeler en goedkoper om minder JavaScript enabled crawlers te hebben!
En dit is alleen Google, van andere zoek machines is het niet altijd duidelijk hoe ze omgaan met JavaScript.
Wat is het verschil tussen een SPA en een MPA?
Een Multi Page Application is een backronym: een afkorting die later is verzonnen toen de SPA werd verzonnen. Een MPA is dus gewoon een website / applicatie met meerdere pagina's waarbij de server bij elke pagina wordt aangeroepen. Je krijgt bij elke pagina / navigatie dus de volledig HTML terug.
Het grote verschil met een SPA is dat je dan een server nodig heeft een programmeertaal runtime heeft. Bijvoorbeeld een Java, Python, PHP, Ruby of C# server.
Bij een SPA is een webserver die statische content kan serveren zoals apache of nginx voldoende. Maar ook een Content Delivery Network om zo dicht bij de gebruiker te serveren is mogelijk.
Natuurlijk is het MPA model dan weer geschikter om applicaties / websites te maken die content driven zijn, zoals blogs, nieuwssites etc. Dit komt omdat er HTML over de lijn gaat en dat vinden zoekmachines fijn.
Ook vereist een MPA vaak geen JavaScript er zijn mensen die uit privacy overwegingen of data limieten JavaScript disabelen. Een SPA sluit deze mensen uit!
SPA en React
Als je graag een SPA in React wilt maken, zodat je geen JavaScript server runtime nodig hebt. Raad ik je aan het volgende artikel te lezen:
Webapp maken met React wat is de beste stack?Contact
Neem contact op via e-mail, phone of app, als je vragen hebt of een offerte wilt aanvragen.