Statische vs Dynamische Websites: Een Uitgebreide Vergelijking – techsyncer

Wanneer veel mensen aan een website denken, komt het concept van statische versus dynamische websites nooit ter sprake. Immers, de website verschijnt gewoon, toch? Technisch gezien wel, maar er gebeurt veel achter de schermen.

Voor iemand die van plan is een website te maken of te migreren, is het essentieel om deze twee soorten websites te kennen. Het soort site dat je kiest, zal van invloed zijn op hoe ontwikkelaars de site beheren en bijwerken, evenals mogelijke operationele en onderhoudskosten.

In dit artikel leer je wat de verschillen zijn tussen statische en dynamische websites. Je zult zien hoe ontwikkelaars statische en dynamische sites maken, hoe je browser ze rendert en vele andere nuttige vergelijkingen.

Wat zijn statische en dynamische websites?

Zoals de naam al aangeeft, zijn de elementen van een statische website vast of hard gecodeerd. De inhoud van een statische website verandert nooit, ongeacht de browser die je gebruikt.

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

De meeste statische websites hebben een informatief karakter. Neem bijvoorbeeld persoonlijke blogs, waar het doel is om informatie aan lezers weer te geven. Op een persoonlijke blog bladeren gebruikers meestal gewoon door de inhoud van de site.

Omgekeerd gaat een dynamische website verder dan client-side code. Uiteindelijk is een dynamische website gebaseerd op HTML en CSS,, net als een statische website. Maar, om functioneel te zijn, heeft een dynamische website server-side talen nodig zoals PHP, ASP.net, of JavaScript om HTML-code dynamisch te genereren.

Dynamische websites gebruiken de term CRUD, wat staat voor Create, Read, Update, Delete. CRUD vertegenwoordigt bewerkingen die worden uitgevoerd tegen een database. En als je geraden hebt dat dynamische websites databases gebruiken, dan heb je het juist geraden!

Verschillen in website-rendering

Hoe leveren webservers statische en dynamische websites aan de browsers van lezers?

Statische websites leveren precies de code op de webserver

Onthoud dat statische websites hardgecodeerde HTML-documenten bevatten met optionele CSS- en JS-bestanden. Welke code je ook uploadt naar een webserver, precies die code wordt geserveerd aan de gebruikers die je website bekijken.

Bijvoorbeeld, hieronder staat een voorbeeld van een statisch websiteproject in Visual Studio Code dat drie bestanden bevat. De startpagina van deze statische website toont alleen een koptekst en een knop.

Wanneer je op een knop op deze eenvoudige webpagina klikt, wordt een woord onthuld.

Static Website Project in Visual Studio Code

Hieronder staat de code van het index.html bestand. Dit dient als de startpagina van de statische website.

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

De volgende code hieronder is voor style.css. Dit CSS-bestand definieert de stijl van hoe de elementen op de startpagina in de browser verschijnen.

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

Tenslotte, de code hieronder is de code voor button.js die de JavaScript-code bevat die de browser zal activeren wanneer een lezer op de knop klikt.

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

Stel dat de statische website nu actief is, dan is de demo hieronder hoe het eruit zou zien. Als je dan de broncode van de pagina opent, zou je zien dat de code van de pagina exact hetzelfde is als de broncode van het index.html bestand.

Opmerking: Dit voorbeeld van een statische website is getest met de HTTP Server / HTML Preview extensie in Visual Studio Code.

Zoals je kunt zien aan de demo hierboven, zelfs als de gebruiker met de pagina heeft geïnteracteerd door op een knop te klikken, is de onderliggende code nooit veranderd. Dat is het gedrag van een statische website; de browser handelt alles af.

Dynamische Websites Lezen eerst een Database

In tegenstelling tot een statische website gebruikt een dynamische website server-side processing om de code te genereren. Dit betekent dat de onderliggende code achter de pagina op elk moment kan veranderen, afhankelijk van het ontwerp.

Bijvoorbeeld, hieronder staat een Node.js dynamisch websiteproject met slechts één JavaScript-bestand.

Dynamic Website Project in Visual Studio Code

De code voor dynamicsite.js wordt hieronder weergegeven. Deze code is een server-side script dat de huidige computertijd weergeeft telkens wanneer de pagina wordt geladen.

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

De demo hieronder laat zien hoe de dynamische website wordt weergegeven. De onderliggende HTML-code verandert telkens wanneer de pagina wordt vernieuwd.

Opmerking: Dit dynamische websitevoorbeeld is getest met behulp van Node.js.

Dat is nu een basisvoorbeeld van hoe een dynamische website zich onder de motorkap gedraagt.

Statische vs Dynamische Websites: Hoe Worden Inhouden Beheerd?

Nu weet je hoe statische en dynamische websites worden weergegeven en geserveerd. Maar hoe zit het met het toevoegen, bijwerken of verwijderen van inhoud? Stel dat je een statische persoonlijke blogwebsite hebt, hoe voeg je dan nieuwe berichten toe? Als je een dynamische e-commerce site hebt, hoe voeg je dan nieuwe producten toe aan je catalogus?

Het type website bepaalt hoe je de inhoud van je website beheert. Hieronder vind je de gebruikelijke opties voor contentbeheer.

Hard-Coding Statische Pagina’s

Wanneer een website of de inhoud ervan moet worden bijgewerkt, gaat dit bijna altijd gepaard met wijzigingen in de code. De fundamentele en waarschijnlijk oudste methode is hard coderen. Deze methode omvat het bewerken van de broncode van de site met behulp van een teksteditor.

Deze methode kan de meest tijdrovende zijn omdat elk aspect van de website handmatig moet worden gecodeerd. Maar dit geeft statische websites ook flexibiliteit over het ontwerp, omdat elke pagina anders kan zijn.

Sommige websites met een eenvoudig ontwerp en functie kunnen hun inhoud schrijven in Markdown. Vervolgens worden die Markdown-documenten omgezet naar HTML, waardoor webpagina’s worden geproduceerd die vervolgens naar de webserver kunnen worden geüpload.

Bijvoorbeeld, de statische website hieronder heeft drie pagina’s; index.html, page1.html en page2.html. Hoewel deze bestanden deel uitmaken van één statische website, zijn ze geschreven om verschillende ontwerpen of thema’s te hebben.

Example of a static website with different page themes

Statische Website Generatoren

In plaats van code handmatig te schrijven, bieden statische websitegeneratoren de mogelijkheid om een volledige statische website te maken, ofwel vanaf nul of vanuit sjablonen. Nieuwe berichten of pagina’s worden meestal geschreven in Markdown, en HTML-bestanden worden gegenereerd tijdens het bouwproces van de website.

De resulterende bestanden kunnen vervolgens naar een webserver worden geüpload om de website tot leven te brengen. In sommige statische websitegeneratoren is het ook mogelijk om inhoud te schrijven in andere formaten zoals puur HTML en JSON.

Hieronder vindt u een lijst met enkele van de meest populaire statische websitegeneratoren die u kunt verkennen.

De voorbeeldwebsite hieronder is gegenereerd met Jekyll zonder ook maar één regel code te hoeven typen.

Content Management System (CMS)

U heeft vast al gehoord van WordPress. Wat dacht u van Drupal, Joomla, en Netlify? Dat zijn de namen van de meest populaire contentmanagementsystemen of CMS.

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

Dynamische websites maken typisch verbinding met een CMS. Sterker nog, wanneer u een webhostingpakket koopt, omvat dit al websitebouwers en CMS die met één klik (of enkele klikken) van de muis kunnen worden ingezet. CMS is waarschijnlijk de reden waarom dynamische websites de populaire keuze zijn.

Statische websites kunnen ook worden geconfigureerd om CMS te gebruiken. Bijvoorbeeld, Netlify heeft integratiesupport met statische sitegeneratoren zoals Jekyll, Hugo en NextJS. Hoewel het instellen van de CMS-integratie met deze platforms meestal meer werk vereist in vergelijking met dynamische websites.

Wanneer een Statische Website te Gebruiken ten opzichte van een Dynamische Website

Als je je afvraagt wanneer de eeuwenoude vraag zal worden beantwoord, “Welke is beter?”, dan kun je blijven wachten. Er zal waarschijnlijk geen definitieve winnaar zijn. Of een dynamische of statische website beter is, is subjectief aan wat jouw eisen zijn.

Er is veel om te overwegen bij het kiezen van het type website. Hieronder volgen slechts enkele van de factoren om rekening mee te houden.

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

Conclusie

Als je al een website hebt, weet je waarschijnlijk al of je een statische of dynamische website hebt. Zo niet, dan zou je in dit artikel moeten hebben geleerd hoe je tussen deze twee typen kunt onderscheiden.

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

Als je gewoon van plan bent om een nieuwe website te bouwen, zal je keuze grotendeels afhangen van het doel ervan. Zo kunnen bijvoorbeeld e-commerce- en wervingswebsites beter dynamisch zijn. Terwijl een blog of portfoliowebsite statische websites voldoende zal vinden.

Statische websites zijn waar het allemaal begon en zullen waarschijnlijk nooit verdwijnen. Vooral nu statische sitegeneratoren steeds populairder worden. Dynamische websites zullen alleen maar beter worden naarmate de ontwikkeling zich voortdurend voordoet.

Verder Lezen

Zorg ervoor dat je deze andere ATA-posts bekijkt als je meer wilt weten over statische en dynamische websites.

Hoe een Azure Static Website te Hosten met Ondersteuning van Cloudflare