PWA vs. SPA: wat zijn de verschillen?

Single Page Applications, zijn zoals het woord het al zegt, applicaties die bestaan uit 1 pagina. Deze pagina wordt steeds gevoed met dynamische content. Voorbeelden van SPA’s die iedereen kent: YouTube, Facebook, Netflix, Google Maps, … 

Bij het openen van een SPA wordt alle code meteen ingeladen. Wanneer je vervolgens doorklikt op de website wordt enkel de nieuwe data ingeladen, de rest van de pagina wordt niet ververst. Hierdoor wordt er geen onnodige tijd verloren bij het laden van een pagina en is het dus voor een bezoeker aangenamer om op je webapp te surfen.

In een vorige blog, gaven we al uitgebreid toelichting over PWA’s. Je kan deze hier terug lezen. In het kort komt het op het volgende neer: PWA's zijn websites die als een app lijken te werken op een mobiel toestel. Doordat een PWA gewoon draait in de browser, maar wel werkt als een mobiele app is het een goed alternatief voor native apps.

We zullen maar meteen met de deur in huis vallen: De verschillen tussen PWA en SPA zijn eigenlijk verwaarloosbaar geworden. In het verleden waren de verschillen tussen een PWA en een SPA veel groter. We zetten de belangrijkste verschillen en de huidige ontwikkelingen op een rijtje.

Snelheid Het grootste verschil tussen een PWA of SPA zat hem in de snelheid waarmee pagina’s werden ingeladen. Bij een SPA duurde het soms wel tot 10 seconden om alles in te laden, terwijl dat bij een PWA slechts 1 seconde was.

Maar technologie staat niet stil! Intussen zijn de verschillen tussen beide minimaal. Een PWA heeft wel de mogelijkheid om alle- of gedeeltelijke files te cachen in de browser van de gebruiker, waardoor deze mogelijks niet hoeft te wachten op data van de server. Maar daarmee is een PWA niet sneller of trager dan een SPA. Recent nog bouwden we een supersnelle SPA voor PizzaHut (Case: Pizzahut). We gebruikten hiervoor Next.js om de snelheid op te drijven. Waarom?

Met Next.js kan je aan server-side rendering doen. Server-side rendering is een rendermethode, die een statische HTML genereert op de server, zodat een browser de volledig gerenderde HTML pagina krijgt. Omdat de browser de HTML via de server doorkrijgt, moet deze niet wachten tot alle scripts ingeladen zijn voor het renderen van de pagina. Hierdoor verschijnt de inhoud van de website heel snel en wordt de inhoud dynamisch van zodra de scripts beschikbaar zijn.

UX Zowel een SPA als een PWA hebben een veel gebruiksvriendelijkere user interface dan de meeste gewone websites. Omdat zowel een SPA als een PWA op alle platformen goed werkt en heel native aanvoelt op mobiele apparaten. Maar toegegeven: Dit is redelijk subjectief want de UX van een webapplicatie hangt van veel meer zaken af.

Security PWA moet aan veel strengere veiligheidsprotocols voldoen dan SPA. Zo moet een PWA altijd draaien op het HTTPS protocol. Maar bij Tailr zijn we ervan overtuigd dat deze standaarden gewoon altijd toegepast moeten worden. Of je nu een PWA, SPA of gewone website bouwt, websecurity is altijd een topprioriteit!

SEO Google neemt verschillende elementen in rekening voor een goede SEO-score. Snelheid en gebruiksvriendelijkheid zijn daar voorbeelden van. Doordat een PWA hier in het verleden beter op scoorde dan een SPA had dat dus gevolgen voor de SEO score. Maar zoals je hierboven al kon lezen is dat probleem bij SPA’s intussen volledig weggewerkt. Het is vooral eenvoudiger geworden doordat de statische HTML beschikbaar is door server-side rendering. Zo kan de zoekrobot de webpagina eenvoudiger indexeren. Ook hier geldt weer dat de SEO-score van je website van veel meer afhangt dan enkel pagespeed. Heb je een supersnelle website, maar irrelevante content? Dan zal je SEO-score lager zijn dan een iets tragere website die de vragen van zijn doelpubliek beantwoord.

Kostprijs Elk project is anders en dat geldt ook voor de kostprijzen. Over het algemeen is een SPA goedkoper om te bouwen dan een PWA, omdat die laatste iets meer developer werkt vereist. Maar heb je bijvoorbeeld al een SPA, waar je een PWA van wil maken? Dan kan dat perfect door de SPA uit te breiden naar een PWA. Hiervoor moet dan een PWA manifest een een service worker geconfigureerd worden. Die meerprijs is verwaarloosbaar en daarom is een PWA dus niet persé veel duurder dan een SPA.

De verschillen tussen een SPA en een PWA zijn verwaarloosbaar. Het zijn ook niet echt verschillende concepten maar eerder complementaire concepten. Afhankelijk van de noden van jouw bedrijf kan het een beter zijn dan het ander. Wil je een webapplicatie bouwen? Dan zijn zowel SPA en PWA (of de combinatie van beiden) goede keuzes wanneer je een webapplicatie wil die zeer toegankelijk is.

Twijfel je toch nog of zit je nog met vragen? Stel ons je vragen en onze experts helpen je graag met het maken van de keuze!