De Unikoo-website gefileerd

Elke marketeer of zaakvoerder die bij Unikoo aanklopt, heeft andere noden of een andere visie voor zijn website. Aan de hand van onze technische skills en vaardigheden, vertalen wij deze noden naar een responsieve website die doet wat ie moet doen.

De noden van de Unikoo-website? Visueel aantrekkelijk, gebruiksvriendelijk en makkelijk om aan te vullen. Maar wat is dan de beste aanpak? Heel wat kennis, ervaring en lessen uit afgelopen projecten kwamen samen bij de creatie van de Unikoo-website. Het bouwen van een website is immers bovenal een opeenvolging van doordachte technologiekeuzes. Daarom slijpen wij voor deze blogpost het virtuele fileermes en leggen de Unikoo-website bloot tot op de graat.

Stack

Voor de diensten van Unikoo gebruikten we al heel wat verschillende technologieën om onze klanten te kunnen verder helpen. Denk hier bijvoorbeeld aan Craft, Angular, React, … Elk systeem heeft zijn eigen sterkte, maar kiezen is onvermijdelijk verliezen. Daarom wilden we het voor dit project eens over een andere boeg gooien. We wilden een stack creëren, een bundeling van technologieën die perfect kunnen samenwerken en waarbij we efficiënt het beste kwalitatieve resultaat kunnen leveren.

Voorheen hadden we al voor enkele klanten gebruik gemaakt van Craft CMS en de visualisatie van de website met Twig (de standaard manier om webpagina’s te visualiseren in Craft). Craft biedt op zich al zeer veel mogelijkheden, maar door de beschikbare in-house expertise en de omvang van de nieuwe website wilden we nog hoger mikken. The sky is the limit.

Daarom besloten we nieuwere technologieën te combineren. Startend van onze eigen expertise kwamen we snel uit op de combinatie van Craft als content management systeem (CMS) en een React-based front-end framework. Zo konden we de geweldige gebruiksvriendelijkheid van Craft gebruiken om al onze websitecontent te beheren, versterkt door de kracht van React om dit alles te visualiseren. Dit gaf de vrijheid om de front-end volledig op maat te maken met veel meer mogelijkheden, zoals bijvoorbeeld inlogsystemen en complexe webformulieren. Daarnaast laat het ons ook toe om de website op te bouwen uit eenvoudig herbruikbare componenten, waardoor we veel efficiënter kunnen werken. Verder namen we van de gelegenheid graag gebruik om het veelbelovende Nextjs te testen.

Kort samengevat hebben we dus gebruik gemaakt van een headless CMS in combinatie met een GraphQL API en NextJS. De perfecte basis voor een moderne, geavanceerde website.

Backend

We lieten het woord net al eens vallen. Craft werkt sinds kort ook headless. Dat wil zeggen dat ze enkel hun backend systeem aanbieden als een service en je dus geen gebruik maakt van het front-end systeem van Craft zelf. Ze doen dit door GraphQL als een standaardfunctionaliteit beschikbaar te maken binnen hun Pro-licentie, waardoor ook andere systemen de content uit Craft kunnen consumeren en visualiseren. Deze dynamische manier om data op te halen vervangt de klassieke “API” en biedt ons de mogelijkheid om aan onze content te werken zonder onze front-end te aan te tasten. Met andere woorden: als we volledig nieuwe content toevoegen zal dit onze front-end niet breken, dus kunnen we continu verder blijven bouwen op de bestaande website

Frontend

Voor de technologie in de front-end was de keuze snel gemaakt: React. Het (voor ons) grootste nadeel van React is dat dit slecht scoort op vlak van SEO (Search Engine Optimisation). Als Google de content van een React-pagina ophaalt krijgt de Crawler (Google’s bot) een lege pagina te zien. Maar gelukkig is er ook een oplossing voor dit probleem: Server Side Rendering (SSR). SSR haalt de data op bij onze servers en stuurt de webpagina in zijn geheel naar de browser. Dit zorgt ervoor dat Google dezelfde content te zien krijgt als elke andere gebruiker. Om de Server Side Rendering op te zetten moesten we natuurlijk niet van nul beginnen. Er bestaan verschillende frameworks die hierbij kunnen helpen, wij kozen voor Nextjs.

Een van de grote voordelen van React is dat het component based werkt. Dit houdt in dat we de webpagina’s kunnen opdelen in verschillende, aparte herbruikbare onderdelen. Zo hebben we een aantal componenten die je regelmatig ziet terugkomen heel gemakkelijk kunnen hergebruiken. Denk hierbij bijvoorbeeld aan de “Header” en “Footer”. Andere componenten zoals “Buttons” of “CallToActionBanner” komen ook meerdere keren voor op de volledige website. Deze hebben dezelfde lay-out, maar een andere achtergrondkleur. Doordat we de volledige controle hebben over zowel de CMS als de front-end hebben we dit allemaal mooi op elkaar afgestemd. Zo hebben we in de CMS een CallToActionBanner opgezet die een “titel”, “subtitel”, “CallToAction” en een “type” heeft. Zo weten we in de front-end iedere keer perfect welk component gerenderd moet worden met welke tekst.

De setup van onze nieuwe website gaf ons de kans om in detail aan de slag te gaan met de laatste technologieën. Wij zijn alvast trots op het resultaat! Ben je zelf op zoek naar een nieuwe website of heb je nog vragen over onze aanpak? Contacteer ons dan, we helpen je graag verder!