Terug naar overzicht

Wat is een Static Site Generator?

30 aug 2022

Een Static Site Generator is een tool waarmee je volledig statische HTML webpagina's genereerd. Als de browser om de pagina vraagt hoeft deze niet eerst door de server opgebouwd te worden vanuit een database, maar wordt direct getoond omdat dit vooraf al gedaan is. Ze zijn pre-built en dus supersnel in te laden door de browser. Dit vindt Google erg fijn!

Inhoud van dit blog

Wat is een Static Site Generator?

Een Statische Website Generator is dus een programma die de bronbestanden omzet naar webpagina's. Een SSG is doorgaans onderdeel van een JAMstack (Javascript /API's / Markup, of wel HTML) ontwikkelmethode. Voor verschillende programeertalen en templatetalen zijn er inmiddels verschillende soorten SSG's. Op die manier is er altijd wel één die past bij de gewenst werkwijze.

Statische of dynamische website?

Eigenlijk is statisch de manier zoals vroeger websites werden gemaakt. HTML pagina's werden hard coded getoond. Dit koste veel tijd om content in te beheren en al snel kwamen CMS'en (Content Management Systemen) zoals WordPress in beeld. Aan het CMS wordt een database gekoppeld en als een gebruiker een pagina bekijkt via de browser gebeurt er dit:

  1. Met PHP-code wordt de database aangeroepen om content op te halen
  2. Er wordt een HTML-structuur opgebouwd om een pagina te genereren. Dit werkt met PHP-code, frameworks en HTML-templates
  3. De browser toont vervolgens de pagina

Met een Static Website Generator wordt oud in feite dus weer nieuw. Door nieuwe ontwikkelmethodes als JAMstack en de bijbehorende technieken wordt het ontwikkelen van een statische website weer nieuw leven ingeblazen. Hieronder het verschil tussen een dynamische website (traditioneel) en een statische website volgens de JAMstack methode:

Static Website Generator met JAMstack

Voordelen statische website

Snelheid

Een statische website is een stuk sneller ten opzichte van een dynamische. Een dynamische pagina doorloopt een aantal stappen voordat het getoond wordt en bij een statische genegereerde pagina is dit al gebeurt. Hij staat al kant-en-klaar voor je beschikbaar.

Hosting via een CDN

Voor de front-end is er geen database nodig omdat daar geen verwerking plaatsvindt. Hierdoor kan de statistische site worden gehost op een Content Delivery Network ofwel CDN. Dit geeft de prestatie en schaalbaarheid een boost. De laadtijd is hierdoor lager dan op een normale webserver. Er is echter ook een backend, zoals Strapi, die wel een database nodig heeft.

Veiligheid

Je hoeft je geen zorgen te maken over de eventuele veiligheidsrisico's van een server of database.

Veelgebruikte Static Site Generators

Met verschillende code talen en templates is er voor iedere toepassing wel een passende Static Site Generator. Wij maken bijvoorbeeld gebruik van Next.js, Nuxt en Gatsby

site generators

Headless CMS en SSG's

Een traditioneel opgezette dynamische website heeft een CMS als WordPress, Drupal of Joomla. Statische opgezette website werkt headless. Meer over headless kun lezen in ons blog: "Headless CMS, wat is het?". Wij werken graag met Strapi, maar ook WordPress heeft de mogelijkheid om headless gebruikt te worden.

Static website laten ontwikkelen?

Sta jij op het punt een website of webapplicatie te starten of wil je je huidige site of applicatie doorontwikkelen naar één die klaar is voor de toekomst? Bel of mail ons gerust naar de mogelijkheden.