Probeer je voor je volgende project te kiezen tussen een statische en een dynamische website? Of weet je niet eens zeker wat een statische website is?
Welke ook op jou van toepassing is, dit artikel is er om je te helpen. Hieronder lees je alles wat je moet weten over statische websites, waaronder wat ze zijn, hoe ze werken, hoe ze verschillen van dynamische websites, en enkele voor- en nadelen van statische websites versus dynamische websites.
Aan het eind zou je een goed idee moeten hebben van welke aanpak het meest geschikt is voor jouw project, en hoe je aan de slag kunt gaan.
Wat is een statische website?
Een statische website is een website die pagina’s levert met behulp van een vast aantal vooraf gebouwde bestanden bestaande uit HTML, CSS en JavaScript.
Een statische website heeft geen verwerking nodig aan de kant van de server en geen database. Alle “dynamische” functionaliteit van de statische website wordt uitgevoerd aan de kant van de client, wat betekent dat de code wordt uitgevoerd in de browser van de bezoeker en niet op de server.
In niet-technische termen betekent dit dat je hosting de websitebestanden precies op dezelfde manier aan de browsers van de bezoekers levert als de bestanden die op de server staan.
Bovendien krijgt elke bezoeker hetzelfde statische bestand in zijn browser, wat betekent dat ze grotendeels exact dezelfde ervaringen hebben en exact dezelfde content te zien krijgen.
Wat is een dynamische website?
Een dynamische website is een website die op de server wordt geregeld en gebaseerd is op een scripttaal (bijv. PHP). Telkens als iemand de site bezoekt*, verwerkt de server de code en/of bevraagt deze de database om de voltooide pagina te genereren.
Hierdoor kan de server voor elk bezoek andere inhoud tonen. Iemand die bijvoorbeeld is ingelogd op de site kan één versie van de pagina zien, terwijl iemand die niet is ingelogd heel andere content ziet als hij de pagina bezoekt.
Het betekent ook dat alle wijzigingen die je in je sitemanagementdashboard aanbrengt meteen zichtbaar zullen zijn, omdat het content management systeem automatisch de pagina met de nieuwste inhoud/wijzigingen zal gaan leveren.
Hoe werken statische websites?
Hoe je een statische website maakt, zullen we later uitdiepen, maar de basisaanpak die de meeste statische sites gebruiken is als volgt:
- Kies hoe je je site bouwt – Hoewel je voor heel eenvoudige websites gewoon handmatig je statische HTML, CSS en JavaScript bestanden zou kunnen maken, gebruiken veel moderne statische websites een soort statische site generator (SSG) tool of headless CMS.
- Zet je site op – Je bouwt je site met het door jou gekozen programma. In tegenstelling tot iets als WordPress zul je je site niet vanaf een live productieserver beheren.
- Implementeer je site – Dit betekent dat je de statische bestanden van je site verplaatst naar live hosting, zodat gebruikers er toegang toe hebben.
Voorbeelden van statische websites en tools
Als je een website bekijkt, is er geen harde en snelle regel om te bepalen of hij statisch of dynamisch is. In plaats daarvan is het nuttiger om te kijken naar voorbeelden van tools die je helpen bij het bouwen en beheren van statische websites.
Hier zijn enkele van de populairste voorbeelden van software voor het maken van statische websites:
Met al deze tools kun je statische websites maken, maar ze doen dat op heel verschillende manieren. Publii geeft je bijvoorbeeld een codevrije desktop-interface, terwijl je voor sommige andere tools de commandoregel moet gebruiken.
Voorbeelden van dynamische websites en tools
Laten we, om je te helpen vergelijken met de bovenstaande voorbeelden van statische websites, ook eens kijken naar voorbeelden van enkele dynamische websites.
Het populairste voorbeeld van dynamische websites is de software van WordPress, die meer dan 43% van alle websites aandrijft op het internet.
Hoewel je WordPress kunt gebruiken voor statische websites door een statische sitegeneratorplugin te installeren, functioneert WordPress standaard als een bouwer van dynamische websites.
Hier zijn enkele andere bekende voorbeelden van dynamische websites die een soortgelijke aanpak gebruiken:
- Drupal
- Joomla
- Shopify (samen met vrijwel elk ander eCommerce platform)
Statische vs dynamische websites: voor- en nadelen
Nu je een goed begrip hebt van wat een statische website is en hoe die zich verhoudt tot een dynamische website, laten we eens kijken naar de voor- en nadelen van statische versus dynamische websites.
Voordelen statische websites
- Gemakkelijker te optimaliseren voor prestaties – omdat statische websites minder “bewegende delen” hebben, zijn ze veel gemakkelijker te optimaliseren voor prestaties. Statische websites zijn over het algemeen zeer lean en snel ladend, vooral als je ze goed bouwt.
- Vereist minder serverresources – omdat statische websites geen server-side verwerking vereisen, hoeft de server bij elk bezoek veel minder werk te verrichten. Dit verbetert de prestaties en helpt je website beter te presteren bij schaalvergroting. Je kunt je statische website zelfs rechtstreeks naar een CDN sturen en het gebruik van een webserver helemaal overslaan (wat deels betekent dat je site geen statisch IP adres heeft).
- Het is erg goedkoop om statische websites te hosten – voor eenvoudige hobbyprojecten/portfolio’s kun je ze gratis hosten op onze Statische Site Hosting of andere gratis hostingdiensten gebruiken zoals GitHub Pages of Cloudflare Pages.
- Gemakkelijker te beveiligen – omdat statische sites niet afhankelijk zijn van server-side verwerking of databases, zijn er minder aanvalsopeningen voor kwaadwillenden. Het is nog steeds mogelijk dat een statische website wordt gehackt – maar de kans daarop is een stuk kleiner.
- Zeer eenvoudig te lanceren voor eenvoudige websites – je kunt statische websites zeer snel lanceren omdat je je geen zorgen hoeft te maken over het instellen van technische details zoals databases.
Nadelen statische websites
- Het kan ingewikkelder zijn om content/design updates toe te passen – met een statische site moet je je website opnieuw deployen telkens als je een verandering aanbrengt of updates toepast – zelfs voor iets heel kleins als het veranderen van een item in je navigatiemenu. Dit kan wat extra complexiteit toevoegen, vooral als je je website regelmatig verandert. Als je echter deployt met je Git repository via Statische Site Hosting zoals Kinsta, dan kun je Automatisch deployen aanzetten om automatisch vanuit je Git repository te deployen als er een verandering optreedt.
- Kan technischer zijn om features toe te voegen – met dynamische websitetools als WordPress kun je een nieuwe plugin installeren als je functionaliteit aan je site wilt toevoegen. Bij statische sites is het meestal, maar niet altijd, ingewikkelder.
- Content management functionaliteit is meestal niet zo sterk – statische website tools zijn meestal niet zo sterk in het beheren van content, wat lastig kan zijn als je een grote website hebt met duizenden stukken content en veel taxonomieën voor organisatie. Sommige statische site generatoren doen echter veel om dit probleem te verminderen.
- Afhankelijkheid van externe diensten voor zelfs elementaire functionaliteit zoals webformulieren – de meeste statische websites gebruiken bijvoorbeeld voor formulieren endpoint API’s zoals FormBold of Getform. Of je kunt externe formulierendiensten zoals Google Forms (of een van deze Google Forms alternatieven) inbouwen. Met een dynamisch content management systeem als WordPress zou je gewoon een formulierplugin kunnen installeren en alles opslaan in de database van je site.
Voordelen dynamische websites
- Kan gepersonaliseerde bezoekerservaringen creëren – je kunt de inhoud van een pagina dynamisch aanpassen op basis van de persoon die hem bekijkt. Je kunt bijvoorbeeld een lidmaatschapssite maken waar betalende leden de volledige inhoud van een pagina te zien krijgen, terwijl anonieme bezoekers alleen een kleine preview te zien krijgen.
- Eenvoudig bijwerken van je site (inhoud en ontwerp) – Het is heel eenvoudig om updates van content en design toe te passen op een dynamische site. Zodra je de update toepast in je site managementdashboard, zou je die verandering onmiddellijk op je live site moeten zien. Het is niet nodig om je hele site opnieuw te deployen zoals bij een statische site.
- Gemakkelijker nieuwe features toevoegen via plugins/apps – je kunt bijvoorbeeld gewoon nieuwe plugins installeren om functies toe te voegen als je WordPress gebruikt als je dynamische website content management systeem.
- Sterkere features voor contentbeheer op schaal – dynamische websitetools zijn over het algemeen beter voor het beheren van veel content. Als je bijvoorbeeld een directory bouwt van duizenden lokale bedrijven, is een dynamische website tool meestal een betere optie.
Nadelen dynamische websites
- Kan duurder zijn om te hosten – alles bij elkaar genomen is een dynamische website meestal duurder om te hosten, omdat er meer serverresources nodig zijn voor verwerking aan de kant van de server.
- Moeilijker te beveiligen – dynamische websites hebben meer aanvalsoppervlakken dan statische websites, waardoor ze iets ingewikkelder te beveiligen zijn. Je zult je bijvoorbeeld zorgen moeten maken over SQL injectie aanvallen, iets waar statische sites geen last van hebben(omdat statische sites geen database hebben).
- Vergt meer inspanning voor prestatieoptimalisatie – het optimaliseren van een dynamische website is ingewikkelder, omdat je je zorgen moet maken over de prestaties aan zowel de voorkant (is je code goed geschreven), als onder de motorkap (beschikt je server over de juiste resources). Bij dynamische websites moet je bijvoorbeeld tijd besteden aan het optimaliseren van databasequeries en prestaties, wat bij statische sites niet aan de orde is.
- Iets ingewikkelder installatieproces – als je bijvoorbeeld een WordPress website wilt maken, moet je je database instellen en ervoor zorgen dat je site over de nodige technologieën beschikt (bijvoorbeeld een recente versie van PHP, MySQL/MariaDB, enzovoort). Het gebruik van Managed WordPress Hosting zoals Kinsta kan het beheer van je WordPress site echter sterk vereenvoudigen door je WordPress sites te laten starten met behulp van een eenvoudige interface.
Zo bouw je een statische website
Als je denkt dat de voordelen van het bouwen van een statische website het geschikt maken voor je volgende project, dan is hier een korte handleiding voor het maken van een statische website.
We houden deze gids met opzet algemeen, zodat je hem kunt aanpassen aan je eigen gebruik.
1. Kies een statische sitegenerator of CMS
Om te beginnen kies je een statische sitegenerator of een content management systeem waarmee je een statische site kunt maken.
Als je de technische kennis hebt, kun je altijd een statische site vanaf nul maken met je eigen HTML, CSS en JavaScript, samen met je favoriete HTML editor software. Dit kan echter snel onhandelbaar worden als je site groeit en je al dan niet de technische kennis hebt om alles vanaf nul te doen.
Een statische sitegenerator geeft je een eenvoudiger manier om je statische site te bouwen. Het maakt het ook gemakkelijker om je site in de toekomst bij te werken.
In plaats van elk HTML bestand te moeten bewerken wanneer je een wijziging aanbrengt (zoals het toevoegen van een nieuw item aan je navigatiemenu), kan de statische sitegenerator je helpen nieuwe versies van alle bestanden van je site te deployen met de wijzigingen erin.
Hier zijn enkele populaire statische sitegeneratoren die je kunt overwegen:
- Jekyll – een van de populairste open-source statische websitegeneratoren. Kan werken voor uiteenlopende sites en ondersteunt blogs. We hebben een heel artikel gewijd aan hoe je een statische site maakt met Jekyll.
- Hugo – een andere populaire open-source generator die kan werken voor allerlei soorten sites. We hebben ook een artikel over hoe je een statische site maakt met Hugo.
- WordPress + een statische sitegenerator plugin – je kunt WordPress gebruiken om je site te bouwen, maar hem dan deployen als een statische HTML site met de statische sitegeneratorplugin van je voorkeur.
Bekijk voor meer opties ons artikel met de beste statische sitegeneratoren.
2. Bouw je website
Als je de tool van je voorkeur hebt gekozen, gebruik je die om je website te bouwen.
Hoe dat in zijn werk gaat hangt af van de tool die je kiest, dus er is niet één handleiding die voor alle statische sitegeneratoren geldt.
Als je een WordPress achtergrond hebt, is het gebruik van WordPress zelf als statische sitegenerator een van de eenvoudigste manieren om te beginnen en je eerste statische site te maken.
Hier is een voorbeeld van hoe het eruit zou kunnen zien om een statische website te bouwen met WordPress:
- Maak een lokale WordPress site met behulp van DevKinsta. Dit zal niet de site zijn waar je bezoekers daadwerkelijk interactie mee hebben – het is alleen de plek waar je je content en websiteontwerp beheert.
- Richt je site in met je favoriete ontwerptool. Je kunt de eigen WordPress Block Editor gebruiken of je favoriete paginabuilder plugin zoals Elementor of Divi.
- Installeer een statische sitegenerator plugin. Dit is wat je gaat gebruiken om je statische website in de volgende stap te deployen. Populaire opties zijn Simply Static en WP2Static, hoewel er ook nieuwere alternatieven zijn zoals Staatic.
Een andere optie is om WordPress te koppelen aan Gatsy met GraphQL.
3. Deploy je website naar je hosting
Zodra je je website hebt gebouwd, moet je hem deployen naar je hostingdienst. In wezen betekent dit dat je een manier nodig hebt om de statische HTML bestanden van je computer naar het internet te krijgen.
Er zijn een paar verschillende manieren om dit te doen.
Eén manier is om gebruik te maken van Statische Site Hosting. Met deze hostingoplossing kun je moeiteloos automatisch en continu deployen via de hostingsprovider van je voorkeur. Kinsta biedt een uitzonderlijke Statische Site Hosting dienst die je site binnen enkele seconden bouwt en levert.
Bijvoorbeeld, het pushen van nieuwe bestanden naar GitHub zou automatisch een proces als dit in gang kunnen zetten:
- Als je een wijziging in GitHub pusht, wordt automatisch je server op de hoogte gebracht, bijvoorbeeld Kinsta.
- Je server haalt de nieuwste bestanden op van GitHub en voert het build commando van je statische site uit.
- Je server verplaatst de bestanden naar de live siteomgeving.
Voor een andere op Git gebaseerde optie gebruiken sommige mensen ook graag GitHub Pages voor statische websites.
Als alternatieve benadering willen sommige mensen ook graag rechtstreeks naar een CDN deployen, in plaats van een soort webserver te gebruiken. Deze aanpak zou er ongeveer zo uit kunnen zien:
- Je uploadt de bestanden van je site naar een online opslagomgeving. Veel tools kunnen dit automatisch of via de opdrachtregel doen.
- Je stelt een CDN in om uit die opslag te halen.
- Als je nieuwe bestanden publiceert naar je opslag, zal het CDN automatisch beginnen met het ophalen van die nieuwe bestanden.
Als je tool geen speciale features biedt om het uitrollen van je site te vereenvoudigen, zou je dit moeten doen:
- De statische HTML bestanden van je site genereren.
- Die bestanden handmatig uploaden naar je statische website hostingdienst.
Moet je een statische website gebruiken voor je volgende project?
Of een statische website geschikt is voor je volgende project hangt af van het doel van je website en je eigen kennisniveau.
Er is dus geen eenduidig antwoord.
Laten we in plaats daarvan enkele situaties doornemen waarin het wel of niet zinvol kan zijn om een statische website te gebruiken.
Wanneer een statische website zinvol kan zijn
Een statische website werkt het beste voor websites waar alle bezoekers dezelfde inhoud zien en de inhoud niet vaak verandert – vooral voor kleinere websites met niet veel inhoud.
Hier zijn enkele soorten websites die heel goed kunnen werken met de statische aanpak:
- Portfoliowebsites
- Basic bedrijfswebsites
- CV websites
- Eenvoudige blogs die niet zo vaak publiceren
- Documentatie met content/kennisbanken
- Landingspagina’s
Dit soort websites kan alle voordelen van de statische aanpak gebruiken, maar met heel weinig nadelen.
Het is bijvoorbeeld onwaarschijnlijk dat je een basic bedrijfswebsite moet personaliseren, dus je “verliest” geen functionaliteit door de statische benadering te gebruiken.
Ook veranderen dit soort sites niet zo vaak, zodat je je geen zorgen hoeft te maken over het steeds opnieuw plaatsen van je statische pagina’s.
Wanneer een dynamische website zinvol kan zijn
Om te beginnen zijn dynamische websites over het algemeen altijd de beste keuze voor situaties waarin je de mogelijkheid nodig hebt om de site-ervaring te personaliseren, zoals e-commerce winkels, lidmaatschapwebsites, online cursussen, enzovoort.
Als je wilt dat gebruikers verschillende inhoud op een pagina kunnen zien, zul je meestal een dynamische website willen gebruiken.
Hoewel er manieren zijn om bovengenoemde soorten websites te bouwen met een statische website, zijn de nadelen die je daarvoor moet maken het meestal niet waard, en daarom is een dynamische website vaak een betere keuze.
Dynamische websites zijn vaak ook zinvoller voor sites met veel inhoud, vooral sites met veel taxonomieën en andere organisatiemethoden
Ook als je regelmatig nieuwe inhoud publiceert, kan dat een reden zijn om voor een dynamische website te kiezen.
Een persoonlijke blog waar je slechts elke 2 weken 1 nieuw bericht publiceert, is bijvoorbeeld misschien prima als statische website, maar een blog waar je inkomsten uit haalt die elke dag vijf nieuwe berichten publiceert is waarschijnlijk beter als dynamische website.
Samenvatting
Ter samenvatting: een statische website is een website die vaste HTML pagina’s levert en alle bewerkingen aan de kant van de client uitvoert. Als je een statische site maakt, krijgt elke gebruiker hetzelfde statische HTML bestand/inhoud als hij een pagina bezoekt.
Deze statische website aanpak is steeds populairder geworden, vooral dankzij statische websitegeneratoren als Hugo, Jekyll, Gatsby en andere.
Het bouwen van een statische website heeft echter zowel voor- als nadelen, zodat het niet voor alle websites de juiste aanpak is.
Als je aan de slag wilt met je eigen statische website, kun je een statische sitegenerator kiezen en je website binnen een paar seconden gratis lanceren met Kinsta’s Statische Site Hosting.
Als alternatief voor Statische Site Hosting kun je ervoor kiezen om je statische site te deployen met Kinsta’s Applicatie Hosting, die meer flexibiliteit biedt bij het hosten, een breder scala aan voordelen en toegang tot robuustere features. Bijvoorbeeld schaalbaarheid, op maat deployen met behulp van een Dockerfile en uitgebreide analytics met real-time en historische gegevens.
Wat vind jij van statische sites? Deel je gedachten en ervaringen met ons in het commentveld hieronder.
