Brandbrand
Plan een gesprek
Brandbrand
Een monitor met code en een webontwerp, met daarvoor een tablet en een telefoon

Headless of monoliet: de voor- en nadelen

Bij een monoliet maakt één systeem zowel de inhoud als de pagina's. Bij headless zijn dat er twee. Wat elk oplevert, wat het kost, en waarom deze site headless is.

Twee manieren om een site te bouwen

In een monoliet doet één applicatie alles. Drupal bewaart de content, en Drupal maakt er met zijn thema ook de HTML-pagina's van. Eén systeem, één server, één update.

Bij headless is het CMS alleen nog de plek waar de content staat. Het levert die content via een API, en een aparte frontend bouwt de pagina's. Op deze site is dat Drupal met GraphQL als API, en Next.js als frontend. De redacteur werkt in Drupal zoals altijd; de bezoeker ziet alleen wat Next.js maakt.

Volg één paginabezoek

Wat er gebeurt als iemand deze pagina opvraagt, en wat er gebeurt als een redacteur hem daarna aanpast.

Een pagina van brandbrand.nl

  1. Een bezoeker vraagt een pagina op. Next.js heeft hem al klaarliggen en stuurt hem direct terug. Drupal komt er niet aan te pas.
  2. Wordt een pagina voor het eerst gevraagd, dan vraagt Next.js de content op bij Drupal via GraphQL.
  3. Next.js maakt er HTML van, stuurt die naar de bezoeker en bewaart de pagina voor de volgende.
  4. Een redacteur past de tekst aan in Drupal en slaat op.
  5. Drupal laat Next.js weten welke pagina's veranderd zijn. Die worden opnieuw gemaakt; de rest blijft staan.

Wat headless oplevert

  • Snelheid. Pagina's liggen klaar voordat iemand erom vraagt. Het CMS hoeft niet bij elk bezoek te rekenen.
  • Vrijheid in de frontend. De pagina's zijn gebouwd met moderne componenten, met een eigen designsysteem en interactieve onderdelen, zonder de grenzen van een CMS-thema.
  • Eén bron voor meer kanalen. Dezelfde content kan naar de site, een app of een ander systeem.
  • Losse onderdelen. De frontend en het CMS worden apart bijgewerkt en apart opgeschaald. De bezoeker praat niet rechtstreeks met het CMS.

Wat headless kost

  • Twee systemen. Twee servers, twee sets updates, twee dingen die kunnen haperen. Alles wat je bij een monoliet één keer bijhoudt, doe je hier twee keer.
  • Wat Drupal gratis gaf, bouw je zelf. Een voorbeeld bekijken voor het publiceren, menu's, formulieren, redirects, metadata voor zoekmachines: in een monoliet zit het erin, headless moet de frontend het overnemen.
  • Cache die je moet begrijpen. Wanneer is een wijziging zichtbaar, en welke pagina's moeten opnieuw? Dat moet kloppen, anders ziet een bezoeker oude content.
  • Volgorde bij een update. De frontend heeft het CMS nodig om pagina's te bouwen. Gaan ze tegelijk door een update, dan kan de een op de ander wachten. Bij deze site gebeurde dat: de nieuwe frontend kon niet gebouwd worden zolang Drupal in onderhoud stond.
  • Meer kennis in het team. PHP voor Drupal, JavaScript voor de frontend, en iemand die het geheel overziet.

Wanneer kies je wat

Kies een monoliet voor een contentsite met gewone wensen, een team dat in één systeem wil werken, en een budget dat naar content moet in plaats van naar techniek. Drupal met een goed thema is dan sneller gebouwd en goedkoper bij te houden.

Kies headless als snelheid zwaar weegt, als dezelfde content naar meer plekken moet, of als de frontend dingen moet doen die een thema niet goed kan: veel interactie, een eigen designsysteem, onderdelen die je ook elders gebruikt.

Waarom deze site headless is

brandbrand.nl is gebouwd om te laten zien hoe wij werken. De content staat in Drupal, in het Nederlands en het Engels. Next.js bouwt de pagina's en houdt ze klaar. De interactieve onderdelen, zoals de stappen hierboven, zijn componenten in de frontend die een redacteur in Drupal als blok op een pagina zet. De prijs kennen we: twee systemen om bij te houden. Voor een site die snel moet zijn en onderdelen heeft die een thema niet goed kan, vinden we die het waard.

Ons standpunt

Headless is geen upgrade. Het is een keuze met een prijs, en die prijs moet iets opleveren.
Brandbrand

Vragen hierover

Wat is headless?

Een opzet waarin het CMS alleen de content beheert en via een API levert, en een aparte frontend de pagina's bouwt.

Is headless altijd sneller?

Niet vanzelf. De snelheid komt van pagina's die klaarliggen voordat iemand erom vraagt. Een monoliet met goede caching kan ook snel zijn.

Kan een redacteur in een headless Drupal nog zelf pagina's maken?

Ja. De redacteur werkt in Drupal en zet blokken op een pagina; de frontend bepaalt hoe die blokken eruitzien.

Is headless duurder?

Meestal wel: je bouwt en onderhoudt twee systemen, en een deel van wat Drupal standaard doet, bouw je in de frontend opnieuw.