Statische of dynamische websites. Wat is het verschil?
Alle blogs

Statische of dynamische websites. Wat is het verschil?

Met trots lanceerden we samen met Charlotte Douglas International Airport (CLT) onze eerste website als onderdeel van ons Digital Airport Platform (DAP). Een optimale gebruikerservaring op zowel desktop als mobiel. Om tot dit resultaat te komen hebben we gekozen voor een statische website die gebruik maakt van JavaScript. Naast JavaScript hebben we externe APIs en een Markup language gebruikt, de combinatie van deze elementen wordt beschreven als een JAMstack structuur (een architectuur waarop statische web applicaties kunnen worden ontwikkeld).

In deze blog laten we de term JAMstack voor wat het is en duiken we dieper in op de voor- en nadelen en werking van statische vs. dynamische websites.

Wat is een statische website?

Bij statisch websites worden de individuele webpagina’s aan de gebruiker getoond zoals ze zijn opgeslagen. In het geval van de CLT website gebruiken we een zogeheten Static Site Generator om deze statische pagina’s op te bouwen. Simpel gezegd is de static site generator een programma dat bronbestanden omvormt tot webpagina’s. Deze bronbestanden zijn templates die door de static site generator worden verrijkt met data. Deze data kan zo nodig tijdens dit proces via een API worden opgevraagd bij een externe partij.

De templates zijn opgebouwd uit componenten die client side dynamische kunnen worden gemanipuleerd. Dit geeft de eindgebruiker het gevoel dat hij de webpagina niet verlaat. Een native ervaring dus. Voorbeelden zijn de header en footer die in beeld blijven staan ongeacht of een gebruiker een andere pagina opvraagt.

Dynamische componenten op de webpagina worden geschreven in JavaScript. Vaak wordt een front-end library gebruikt zoals Vue of React, maar ook Vanilla JavaScript is een geschikte oplossing. Alle benodigde server-side functionaliteiten zijn beschikbaar via een API, aanspreekbaar via HTTP met JavaScript. De uiteindelijke HTML pagina’s worden gegenereerd via templates in een markup taal zoals Markdown of React JSX, wat normaal gesproken door een static site generator wordt gedaan.

Een veelgebruikte use-case is een blog-website. Hier worden de artikelen in een headless CMS of simpele markup language als Markdown geschreven. Voor elk artikel wordt een webpagina gegenereerd door de content in het template te renderen en het geheel om te zetten naar HTML, CSS en waar nodig JavaScript.

img Contentful Static site

Bij statische websites zijn wijzigingen in bronbestanden of content niet direct zichtbaar. De website moet logischerwijs opnieuw worden gegenereerd. Dit klinkt complex, maar er zijn tal van tools die dit proces kunnen automatiseren. Wij hebben gekozen voor webhooks via een build server. Hierbij wordt er na een aanpassing van de broncode of content een signaal gestuurd naar de build server. De build server genereert vervolgens een nieuwe versie van de website en vervangt de oude website.

Voordelen

Het voornaamste verschil met dynamische websites is dat er voor statische sites geen server side verwerking plaatsvindt. Alle pagina’s zijn opgebouwd nog voordat een gebruiker de website bezoekt. Dit conceptueel verschil geeft statische sites een aantal voordelen tegenover een dynamische variant.

Performance

Statische websites genieten van een betere performance ten opzichte van dynamische. Een webpagina van een dynamische site doorloopt een aantal stappen voordat deze getoond kan worden in de browser. Bij een statische site zijn deze stappen doorlopen nog voordat de pagina wordt opgevraagd.

Neem bijvoorbeeld een traditionele WordPress website. De content die wordt aangemaakt in het WordPress CMS wordt opgeslagen in een database. Als een gebruiker een webpagina opvraagt haalt WordPress de benodigde content uit de database. Met PHP wordt vervolgens een HTML pagina gegenereerd die in de browser kan worden getoond. Telkens als er een webpagina wordt opgevraagd moet deze dus opnieuw worden opgebouwd. Dit komt de snelheid van de website niet ten goede.

Een statische website maakt geen gebruik van een database of server-side rendering. In tegenstelling tot WordPress worden alle webpagina’s opgebouwd voordat deze worden opgevraagd door een gebruiker. De nodige HTML en assets worden tijdens de build al gegenereerd, zodat deze klaar staan op het moment dat de pagina wordt opgevraagd door een gebruiker. img CLT Database Hosting via een CDN

Omdat er server side geen database nodig is en er geen verdere verwerking plaatsvindt, kan een statische site worden gehost op een Content Delivery Network (CDN). Dit geeft de performance en schaalbaarheid een extra boost.

Een CDN is een wereldwijd netwerk van servers met daarop kopieën van dezelfde statische bestanden. Een gebruiker is dus altijd relatief dichtbij een server in het delivery network. De laadtijd is hierdoor lager dan wanneer je statische bestanden op een normale webserver zou hosten.

SEO

Performance is tegenwoordig een belangrijke factor in de search engine ranking van Google. Indien goed benut, biedt een statische website een aantal grote voordelen ten opzichte van een dynamische website op het gebied van SEO.

Zo kunnen statische websites eenvoudig leesbare URL’s genereren. Dynamische websites gebruiken vaak complexe rewrite rules voor in de configuratie van een webserver. Bij een statische website komt het pad in de URL simpelweg overeen met de locatie van de bestanden van de site.

Wanneer ongeschikt

Ondanks de voordelen van een statische site zijn er toch redenen om voor een dynamische website te kiezen.

Gebruiker specifieke content

Een static site generator genereert van elke pagina in principe maar één variant en elke pagina krijgt zijn eigen URL. Als een enkele webpagina toch kan verschillen van content, bijvoorbeeld in het geval van een A/B-test, is een statische website wellicht niet de beste keuze. Toch zijn er manieren waarop hetzelfde resultaat bereikt kan worden met een statische site. Zo zou je onderdelen van de statische site dynamisch in kunnen laden.

Ontwikkelaar afhankelijk

In een WordPress CMS is de beheerder erg vrij in zijn doen en laten. In het geval van een statische website is er doorgaans een programmeur nodig voor aanpassingen aan de website. Via een Headless CMS als Contentful is het mogelijk om een vergelijkbare vrijheid te bieden wat betreft content management. Echter is er voor functionele aanpassingen al snel de expertise van een software ontwikkelaar nodig.

Real-time updates

Aanpassingen van een statische website is niet direct zichtbaar. De website moet namelijk opnieuw gegenereerd worden. Afhankelijk van de grootte van de website kan dit enkele minuten duren. Een website die veel real-time updates moet tonen kan om die reden beter dynamisch zijn opgebouwd.

Conclusie

Een statische website is een website waarbij de individuele webpagina’s aan de gebruiker worden getoond zoals deze vooraf zijn opgeslagen. Oftewel, alle pagina’s zijn al opgebouwd nog voordat een gebruiker de website bezoekt. In het geval van een dynamische website worden alle pagina’s pas opgebouwd op het moment dat een gebruiker de website bezoekt.

Een voornaamste voordeel van een statische website vinden we in de performance en snelheid. Deze zijn aanzienlijk hoger ten opzichte van dynamische websites. Toch kunnen dynamische websites de voorkeur genieten wanneer er bijvoorbeeld veel real-time updates aan de gebruiker getoond moeten worden. Daarnaast is er bij een dynamische website niet voor elke aanpassing aan de site de expertise van een software ontwikkelaar nodig. Onze voorkeur?

Bij M2mobi hebben we de kwaliteit van ons werk hoog in het vaandel staan. Om die reden ontwikkelen we bij voorkeur statische websites. Indien er veel real-time updates aan de gebruiker getoond moeten worden - zoals vluchtstatussen - kiezen we ervoor deze dynamisch in te laden.

Andere artikelen

Wees de eerste.

Krijg als eerste toegang tot speciale content als whitepapers en blog posts.