Het volledig migreren van een codebase naar een nieuwe technologie kan een uitdagende en tijdrovende taak zijn. Om deze uitdagingen te vermijden en tegelijkertijd te profiteren van de voordelen van de nieuwe tech-stack, hebben we gekozen voor een gefaseerde aanpak.
Voor onze klanten is het ontzettend belangrijk om verstandig te kijken naar hoe acties in de techniek kunnen bijdragen aan productdoelen en de techniek daadwerkelijk vooruitbrengt. Headless is dus nooit een doel op zich en het is belangrijk dat zoiets als bijvoorbeeld een headless front-end ook geen onvoorziene risico’s voor het product en dus de gebruiker en/of de business meebrengt. Omdat de wereld van het web continue verandert en dus ook onze klanten bij technische keuzes regelmatig voor deze dilemma’s staan, voeren wij zelf ook acties uit om te onderzoeken welke keuzes de beste zijn.
Als Mooore Digital hebben we recentelijk voor onszelf eens de proef op de som genomen. Door onze bestaande case pagina’s gefaseerd te migreren naar een Nuxt applicatie, stelt deze geleidelijke overgang ons in staat om de voordelen van de nieuwe tech-stack te benutten, zonder direct een groot project aan te hoeven pakken. In deze case nemen we je mee in de aanpak en beschrijven we de keuzes die we hierin te maken hebben.
Het volledig migreren van een codebase naar een nieuwe technologie kan een uitdagende en tijdrovende taak zijn. Om deze uitdagingen te vermijden en tegelijkertijd te profiteren van de voordelen van de nieuwe tech-stack, hebben we gekozen voor een gefaseerde aanpak.
In plaats van direct een groot project aan te pakken, hebben we ervoor gekozen om de overgang stap voor stap te maken. Onze huidige React codebase voldeed niet meer aan onze standaarden, maar we wilden niet direct alle functionaliteiten opnieuw bouwen. Daarom hebben we gebruik gemaakt van de kracht van Nuxt en Netlify om nieuwe pagina's te ontwikkelen met de nieuwe technieken, terwijl we de bestaande website buiten de cases gewoon in stand hielden.
Een van de belangrijkste redenen voor deze migratie was het gebruik van een dedicated headless CMS, zoals Dato, wat overigens ook prima een ander CMS zoals Strapi, Storyblocks oid zou kunnen zijn. Met een headless CMS kunnen we de inhoud en de presentatie van onze website van elkaar scheiden. Dit biedt ons de vrijheid om onze inhoud op meerdere kanalen te gebruiken zonder dat we ons zorgen hoeven te maken over de presentatielaag.
Dankzij het headless CMS kunnen we de inhoud gemakkelijk aanpassen en hergebruiken, waardoor we efficiënter kunnen werken en een consistente gebruikerservaring kunnen bieden.
Om het beste van beide werelden te combineren, hebben we voor Nuxt gekozen als het framework voor onze nieuwe case pagina's. Nuxt is een progressief framework voor het bouwen van server-side-rendered (SSR) en statische websites met behulp van Vue.js.
Met Nuxt beschikken we over krachtige routing, automatische code splitting en server-side rendering, waardoor we snelle en geoptimaliseerde websites kunnen creëren. Het stelt ons in staat om onze case pagina's snel en efficiënt te ontwikkelen, terwijl we profiteren van de voordelen van server-side rendering voor betere prestaties en SEO.
In de praktijk hebben we momenteel twee websites:
Met behulp van Netlify kunnen we zogenaamde "rewrites" instellen voor specifieke paden op een website. Hierdoor kunnen we, zonder de link in je URL balk te veranderen, bepaalde pagina's doorsturen naar een ander domein.
Wat we achter de schermen doen, is alles doorsturen naar de bestaande React applicatie. In ons geval wordt deze applicatie ook gehost op Netlify, maar dat is niet noodzakelijk. Om het goed af te handelen hebben we een set doorstuurregels ontwikkeld. Deze doorstuurregels zorgen ervoor dat wanneer je bijvoorbeeld de homepage bezoekt, je automatisch wordt doorgestuurd naar de oude React applicatie, omdat die pagina nog niet bestaat in de nieuwe Nuxt applicatie. Dit gebeurt allemaal zonder dat je het merkt, aangezien het domein hetzelfde blijft en het design grotendeels intact blijft.
Als je echter de overzichtspagina van de case's bezoekt of een individuele case pagina bekijkt, word je wel naar de nieuwe Nuxt applicatie geleid, omdat deze pagina's wel bestaan in de nieuwe applicatie.
Kort gezegd doet deze doorstuurregel het volgende:
We nodigen je van harte uit om een kijkje te nemen op onze vernieuwde case pagina's, die nu draaien op de krachtige combinatie van het headless CMS Dato en Nuxt. Je zult zien hoe we de prestaties hebben verbeterd en tegelijkertijd een naadloze gebruikerservaring hebben gecreëerd tussen de bestaande en nieuwe applicatie.
Dankzij de gefaseerde aanpak kunnen we sneller nieuwe functies ontwikkelen en een betere gebruikerservaring bieden, zonder dat we direct honderden uren in een nieuw project moeten steken.
Dat is dus goed mogelijk! Er zijn veel cases denkbaar waar dit gewenst is en zeker wanneer een fasenplanning, even los van de techniek, überhaupt al gewenst is. Met onze eigen gefaseerde overgang achten we onszelf in staat om stap voor stap applicaties te vernieuwen, zonder dat dit direct veel tijd en inspanning vergt. Tegelijkertijd bieden we een naadloze ervaring aan onze gebruikers en kunnen we veel sneller nieuwe functies ontwikkelen. Als je ook interesse hebt in een gefaseerde overgang naar een headless CMS, neem dan contact op met een van onze product owners.
Meer weten over headless development?
We maken graag kennis om vrijblijvend je case door te nemen.
