Headless in de praktijk: onze ervaring met Storyblok en Next.js voor Pode

Een ambitieus project voor Pode

Het meubelmerk Pode is opgericht in 2008 en is onderdeel van het Nederlandse design meubelmerk Leolux Furniture Group. Voor Pode is design meer dan alleen een meubelontwerp. Door complete series aan bij elkaar passende meubels en accessoires te bieden, zorgt Pode voor harmonie in heel het huis.

Voor de nieuwe website was het hoofddoel om dit merkgevoel goed over te brengen. Daarom was het voor Pode van groot belang om de overstap van een functionele website naar een ervaringsgericht digitaal platform te maken die de bezoeker inspireert. Dit wilden wij realiseren zonder in te leveren op functionaliteiten of prestaties. Als design meubelmerk is het essentieel dat de merkervaring en het ‘gevoel’ authentiek overkomt op de websitebezoeker. Ons doel als bureau was duidelijk: vanaf het eerste contactmoment moet het merk ademen en de bezoeker moet een merkervaring krijgen die gelijk staat aan de merkervaring van een fysieke showroom.

De uitdaging voor Pode.eu

Onbegrensde creativiteit door headless

Wij hadden qua techniek complete vrijheid nodig om onze visie op de digitale merkbeleving voor Pode.eu te realiseren. Traditionele CMS’en zijn beperkt in wat er in de front-end mogelijk is. Dit komt door de manier waarop de front-end direct gekoppeld is aan de back-end en zo een groot deel van de opmaak en designs bepaalt. Bij een headless CMS is dat niet het geval. Dankzij de architectuur van een headless CMS, beheer je al je content in één afzonderlijk systeem en laad je deze vervolgens naar de verschillende front-ends door middel van API’s. Hierdoor krijg je meer creatieve vrijheid en flexibiliteit omdat de front-end nu niet meer wordt beperkt door de standaardoplossingen die bij een traditioneel CMS wel van kracht zijn. Precies wat wij voor dit project nodig hadden.

Benieuwd naar andere verschillen tussen een headless CMS en een traditioneel CMS? Lees dan onze blog: Headless vs traditioneel CMS: wat is het verschil?

Moderne frameworks

Ook wisten wij dat we voor de realisatie van de digitale merkbeleving gebruik wilde maken van een modern front-end framework dat de mogelijkheid biedt om ambitieuze User Interfaces te maken. Het door Facebook ontwikkelde React is bijvoorbeeld een moderne manier om alles dynamischer, interactiever en intuïtiever te maken. Frameworks als deze zijn niet meer direct aan het CMS gekoppeld. Hierdoor werkt het ook goed voor bijvoorbeeld een online portal of smartwatch app.

Een flexibel CMS

Omdat de front-end voor dit project zo ambitieus is, was het belangrijk dat we voor een solide back-end optie zouden kiezen die eenvoudig is om op te zetten. Er zijn veel traditionele CMS’en waarbij het tijdrovend is om de servers in te richten, het CMS te installeren en te configureren. Gelukkig zijn er tegenwoordig ook veel SaaS (software as a service) CMS’en waarbij het opzetten van een backend, door een plug-and-play-methode, veel minder tijd kost. Zo waren wij in staat om het overgrote deel van onze tijd in de front-end te steken en zo de merkervaring te perfectioneren.

The right tools for the job

Met deze bovenstaande 3 pijlers in gedachten zijn we op zoek gegaan naar de juiste tools . Vanuit onze ervaring met dit soort projecten wisten we al snel wat mogelijk goede opties waren. . Ook gebruiken wij graag nieuwe technologieën om steeds opnieuw geïnspireerd te worden en innovatieve digitale producten te maken. Daarom hebben wij gekozen voor de volgende oplossingen:

Storyblok: headless en SaaS

Wij hebben voor Pode voor een headless CMS gekozen omdat we gebruik wilden maken van de grenzeloze creativiteit de deze oplossing biedt. Ook was het in het geval van Pode belangrijk dat we data vanuit meerdere bronnen, zoals de stoffen en kleuren van meubels, konden tonen. Met een headless CMS is dat makkelijk te realiseren.

Benieuwd of een headless CMS ook voor jou de juiste keuze is? Lees dan onze blog: Nieuw CMS kiezen? 8 situaties waarin een headless CMS de juiste keuze is

Storyblok was in onze optiek een uitstekende keuze om Pode.eu op te bouwen. Dit headless SaaS CMS is makkelijk te implementeren en biedt veel flexibiliteit voor integraties en API’s. Ook geeft Storyblok veel ruimte om maatwerk toe te passen. Veel headless opties bieden in meer rigide en gesloten systeem waardoor je beperkt aanpassingen kunt maken. Voor ons was het essentieel dat er geen restricties waren.

Ook voor content editors biedt Storyblok een aantal voordelen. Het is namelijk mogelijk om in realtime de aanpassingen die je in het CMS maakt, te zien in de front-end. Als je de  pagina opent, krijg je naast de editing tool een live preview van de website te zien. Zo blijft de focus op de ervaring die de bezoeker krijgt en is het eenvoudig om foutjes in de opmaak te herkennen.

Next.js: eindeloze creativiteit met topprestaties

Het eerdergenoemde front-end framework React is in essentie een UI library waarmee je mooie en moderne UI’s kan bouwen. Helaas houden daar de mogelijkheden voor React daar op. Een website die op React is gebouwd moet elke keer als de site geopend wordt de codebase downloaden, opbouwen en genereren. Dat is slecht voor de prestaties en voor SEO. Omdat we niet wilden inleveren op prestaties en functionaliteit van de website was dit voor ons geen optie.

Gelukkig is daar Next.js. Next.js is een compleet en volwassen framework ontwikkeld op basis van React, waarmee je echt productiewaardige oplossingen bouwt. Next.js is in feite een schil om React heen wat zorgt voor een snelle website en goede vindbaarheid met SEO. Verder voorziet Next.js in functionaliteiten als routing, image optimization en internationalization. Next.js biedt tevens de mogelijkheid om eenvoudig plugins aan het ecosysteem toe te voegen voor bijvoorbeeld micro-animaties en pagina transities. Dit was precies wat wij nodig hadden om voor Pode een ongeëvenaarde merkbeleving te realiseren met alle functionaliteiten, topprestaties van een snelle website en goede vindbaarheid via SEO.

Conclusie

We werden met de combinatie van Storyblok en Next.js in staat gesteld om alles wat we voor ogen hadden te bewerkstelligen. Dit komt vooral omdat wij de twee oplossingen als één van de beste headless CMS-en en één van de beste front-ends beschouwen. Een pluspunt is daarbij ook dat Storyblok en Next.js fijn op elkaar inspelen. Met de headless structuur van Storyblok konden we zonder restricties volop inzetten op de front-end. De focus op de front-end werd versterkt door de SaaS-eigenschappen van Storyblok. Het sneller opzetten van het CMS stelde ons in staat om het merendeel van onze middelen inzetten om de merkervaring die de front-end biedt zo goed mogelijk te maken. Het vernieuwde Pode.eu konden we met Next.js volledig in het teken zetten van beleving en inspiratie. Als bureau gebruiken wij altijd de beste ‘tools for the job’ en in dit geval is dat zeker gelukt.