menu

Over de techniek

De bumper starter v3 gebruikt Hugo extended

Hugo is de snelste website-generator ter wereld (zegt men).

Datum: 8 juni 2026

Door: Bart Lagerweij

Over de techniek

Dus Hugo is de snelste? Ja ja, dat zal wel…

Iedereen zegt dat ze de snelste zijn. Dus laten we dat maar even gaan testen.

$ build
# Project looks like Hugo
# building...
Start building sites … 
hugo v0.160.1-extended

                  │ EN  
──────────────────┼─────
 Pages            │ 205 
 Paginator pages  │   0 
 Non-page files   │   1 
 Static files     │   9 
 Processed images │  24 
 Aliases          │   0 
 Cleaned          │   0 

Total in 218 ms

Oké, dat is snel! In 218 milliseconden hebben we 205 pagina’s gegenereerd!

En dan nu NextJS (hoeflon project)

$ next build
   ▲ Next.js 15.3.6
   - Environments: .env.local

 Generating static pages (41/41)

[snip]

  ├ chunks/pages/_app-d2c43375bd63f4d3.js          104 kB
  └ other shared chunks (total)                   6.41 kB

ƒ Middleware                                      34.3 kB

○  (Static)   prerendered as static content
●  (SSG)      prerendered as static HTML (uses getStaticProps)
ƒ  (Dynamic)  server-rendered on demand

Done in 100.44s.

Dus 41 (in 5 talen) = 205 pagina’s in 100 seconden.

We kijken naar de snelheid van de twee frameworks:

Framework Pagina’s Tijd Snelheid per pagina
Hugo 205 218 ms ~1 ms (milliseconde)
Next.js 205 100 sec 0,5 seconde

Conclusie

Hugo is ongeveer 450 keer sneller dan Next.js! Dus Hugo is de “Formule 1” onder de website generators.

Hugo is dus snel!
Hugo is dus snel!

De Filosofie: Statisch vs. Dynamisch

Hugo genereert een statisch website. Wat is dat precies? Betekent statisch dat de site “stilstaat”? Integendeel. In moderne webontwikkeling verschuift de intelligentie van de server naar de build-fase. Hoewel Hugo geen standaard client-side ‘state’ management heeft zoals React, dwingt dit ons tot een “Content First” aanpak. Interactieve elementen voegen we gericht toe waar ze waarde bieden, zonder de website te belasten met onnodige JavaScript-overhead.

Structuur

De structuur van v3 is ontworpen voor maximale schaalbaarheid en overzicht:

  • Content: Alle content (teksten, afbeeldingen en documenten) leven in de /content directory als overzichtelijke, leesbare Markdown-bestanden.
  • Assets: Afbeeldingen en Sass-bestanden worden on-the-fly geoptimaliseerd.
  • Layouts: Een modulair template-systeem dat consistentie waarborgt, ongeacht de diepte van de site.

High-End Performance

Door de kracht van Hugo Extended benutten we direct geavanceerde optimalisatietechnieken:

  • Smart Asset Pipeline: Real-time compilatie van Sass naar geoptimaliseerde, minified CSS.
  • Fluid Typography: Een interface die vloeiend schaalt tussen mobiel en desktop, zonder een wirwar aan breakpoints.
  • Next-Gen Image Processing: Afbeeldingen worden automatisch geschaald en geconverteerd naar moderne formaten (zoals WebP) voor minimale laadtijden.