{"id":4269604,"date":"2021-11-01T12:11:30","date_gmt":"2021-11-01T10:11:30","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/"},"modified":"2025-12-08T13:42:12","modified_gmt":"2025-12-08T11:42:12","slug":"build-better-experiences-with-server-driven-ui","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/","title":{"rendered":"Build better experiences with server-driven UI"},"content":{"rendered":"<div class=\"block-article-post-header js-block-article-post-header block-article-post-header__theme--onyxGrey\">\n\t<button\tclass=\"cta-button block-article-post-header__back-button cta-button__color--white cta-button__style--back\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button><h1\t\tclass=\"typography block-article-post-header__title typography__color--white typography__size--h1 typography__align--left\"\n\t\t\t>\n\t\tBuild better experiences with server-driven UI\t<\/h1><div\n\t\tclass=\"image-wrap block-article-post-header__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png\"\n\t\t\t\tclass=\"image block-article-post-header__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><div class=\"author block-article-post-header__author\" data-animation=\"slide-fade\">\n\t\t\t<img\n\t\t\tclass=\"author__portrait\"\n\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/Jasper-Steenweg-150x150.jpg\"\n\t\t\talt=\"Jasper Steenweg\"\n\t\t\/>\n\t\n\t<div class=\"author__text\">\n\t\tJasper Steenweg\t\t<br \/>\n\t\tIntegrations Director\n\t\t\t<\/div>\n<\/div>\n\t<div class=\"block-article-post-header__meta\">\n\t\t\t\t\t\t\t<div class=\"block-article-post-header__meta-date\">\n\t\t\t\t<div class=\"block-article-post-header__date-description\">\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t<div class=\"block-article-post-header__published-date\">\n\t\t\t\t\t1 November 2021\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tMeer dan ooit blijft goede content oppermachtig als het gaat om het bouwen van ervaringen waar klanten naar op zoek zijn en naar verlangen. De content van vandaag moet rijk, relevant en passend zijn voor het format op alle touchpoints en kanalen. Maar hoe publiceer en verspreid je jouw content effectief en consequent? Contentteams die met een enterprise (headless) CMS werken, merken dat het bij de ervaring van contentmanagers vaak ontbreekt aan flexibiliteit en creatieve vrijheid. Als nieuwe benadering van contentmanagement helpt <em>server-driven UI<\/em> je om betere ervaringen op te bouwen voor zowel klanten als contentmanagers.<br><br>\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tIn het huidige marketinglandschap is de mantra-content meer leidend dan ooit tevoren. Nu de digitale transformatie in bijna alle markten en branches in een hogere versnelling komt, neemt de hoeveelheid digitale inhoud ook toe. Van interactie met medewerkers die op afstand werken tot het opbouwen van een nieuwe online aanwezigheid en het uitbreiden van de portfolio van online producten en diensten. Mediaconsumptie is <a href=\"https:\/\/www.nielsen.com\/us\/en\/insights\/article\/2020\/covid-19-tracking-the-impact-on-media-consumption\/\" target=\"_blank\" rel=\"noreferrer noopener\">booming<\/a>, oudere generaties gingen <a href=\"https:\/\/www.ericsson.com\/en\/blog\/2021\/1\/seniors-and-technology-during-covid\" target=\"_blank\" rel=\"noreferrer noopener\">sneller<\/a> digitaal en marketeers investeerden in 2021 <a href=\"https:\/\/www.hubspot.com\/hubfs\/State-of-Marketing-V2.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">17% meer budget<\/a> aan contentmarketing.<br><br>En er is nog een tweede reden waarom investeren in kwalitatieve content momenteel in opkomst is: de dood van de cookie. Zoals Cristian van Nispen, onze Head of Data, uitlegt in zijn whitepaper <a href=\"https:\/\/www.deptagency.com\/download\/longreads\/navigating-the-cookieless-world\/\" target=\"_blank\" rel=\"noreferrer noopener\">Navigating the Cookieless World<\/a>, is premium content \u00e9\u00e9n van de cruciale stappen voor digitale marketing om te overleven in een wereld zonder cookies. Nu third party cookies volgend jaar verdwijnen, zal het veel moeilijker zijn om de customer journey over verschillende touchpoints samen te stellen. Door premium content aan te bieden in ruil voor contactgegevens kunnen marketeers online bezoekers identificeren en klantbetrokkenheid blijven opbouwen.<br><br>Dus nu contentmarketing belangrijker is voor organisaties dan ooit, hoe bedien en publiceer je jouw content effectief en consistent?\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tDe behoefte aan content controle\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tContentteams en managers voelen de druk: ze moeten hoogwaardige content zo snel en effici\u00ebnt mogelijk en consistent over alle kanalen verspreiden. Maar hoewel het gebruik van enterprise of headless CMS\u2019en veiligheid, beschikbaarheid en stabiliteit garanderen, hebben deze systemen vaak ook een rigide karakter als het gaat om het spelen met de lay-out en structuur van de content.<br><br>Oorspronkelijk werkt de front-end applicatie op basis van statische templates die eenmalig zijn ontworpen door een front-end developer en daarna doorlopend worden gevuld door een content manager. Er ontstaan echter problemen wanneer de contentmanager content publiceert die niet in de template past, zoals bijvoorbeeld twee afbeeldingen terwijl er maar ruimte is voor \u00e9\u00e9n afbeelding. Maar al te vaak moet de contentmanager ondersteuning vragen aan een front-end ontwikkelaar om het content stuk aan te passen. De oplossing voor deze uitdaging is om sjablonen te verwijderen en in plaats daarvan te focussen op afzonderlijke componenten.\u00a0\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tEen taart bakken met component-based content modelling\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tMet talloze doelgroepen, doeleinden en kanalen kan content binnen jouw organisatie veel verschillende vormen aannemen. In die zin heeft het publiceren van content enige overeenkomst met het bakken van een taart. De ingredi\u00ebnten kunnen enorm vari\u00ebren, maar er zijn enkele basisprincipes om in gedachten te houden en er is een bepaalde volgorde.<br><br>Met component-based content modelling verdeel je jouw content in herkenbare ingredi\u00ebnten, zoals een tekstblok, een afbeeldingengalerij, een hero, een quote, een formulier, een call-to-action, een carrousel van afbeeldingen, ingevouwen teksten voor een FAQ of een embedded video. Er kunnen tientallen of zelfs honderden verschillende componenten zijn, passend bij de specifieke behoeften van lokale teams of afdelingen.\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F&#038;text=Build%20better%20experiences%20with%20server-driven%20UI\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"video video__type--vimeo block-video__video\">\n\t<div\n\t\tclass=\"video__player block-video__video plyr__video-embed js-video-player\"\n\t\tdata-provider=\"vimeo\"\n\t\tdata-ratio=\"sixteen-nine\"\n\t\tdata-autoplay=\"true\"\n\t\tdata-loop=\"true\"\n\t\tdata-muted=\"true\"\n\t\tdata-background-mode=\"true\"\n\t\tdata-auto-pause=\"true\"\n\t\tdata-controls=\"\">\n\n\t\t\t\t\t<iframe\n\t\t\t\tclass=\"video__ratio--sixteen-nine\"\n\t\t\t\tsrc=\"https:\/\/player.vimeo.com\/video\/641111897?background=1&#038;autoplay=1&#038;controls=0&#038;byline=0&#038;title=0&#038;muted=1&#038;loop=1&#038;portrait=0&#038;speed=0&#038;gesture=media&#038;dnt=1\"\n\t\t\t\tframeBorder=\"0\"\n\t\t\t\tallow=\"autoplay; fullscreen\"\n\t\t\t\tallowFullScreen\n\t\t\t\ttitle=\"Vimeo video\"\n\t\t\t><\/iframe>\n\t\t\t<\/div>\n\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tNadat de componenten zijn gedefinieerd door de front-end ontwikkelaar kan de contentmanager deze ingredi\u00ebnten gebruiken om een publicatie samen te stellen. Per contenttype kunnen de componenten vooraf worden gedefinieerd, zoals specifieke CTA&#8217;s voor landingspagina&#8217;s bijvoorbeeld. Daarnaast kan de volgorde waarin de componenten op de publicatie verschijnen worden ingesteld, wat zorgt voor een logische opbouw die herkenbaar is en voldoet aan de verwachting van de klant. Elk nieuw onderdeel dat wordt toegevoegd kan op de hele site worden gebruikt en wanneer een CTA verandert, hoef je de wijziging maar op \u00e9\u00e9n plek toe te passen om deze overal bij te werken. Het gebruik van component-based content modelling zorgt voor minder afhankelijkheid van het development team en geeft contentmanagers veel meer autonomie. Dat klinkt natuurlijk perfect, maar hoe verwezenlijk je dit?\u00a0\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tServer-driven UI laat de server beslissen\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tDe oplossing voor het vervangen van sjablonen door component-based content modelling wordt server-driven UI of kortweg SDUI genoemd. Dit is wanneer de API de klant vertelt welke componenten moeten worden weergegeven en met welke content. Server-driven UI kan worden ge\u00efmplementeerd in alle moderne CMS&#8217;en voor websites en mobiele platforms. Het verschil met de traditionele client\/server-architectuur is dat niet de client beslist hoe de domeinobjecten worden weergegeven, maar de server.<br><br>Terwijl de gebruiker de website bezoekt of de app gebruikt, wordt er een verzoek verzonden naar een server die een JSON-antwoord verstrekt waarin logica aanwezig is voor wat op het scherm moet worden getoond. Op basis van deze logica worden de lokaal ontwikkelde UI-componenten opgebouwd en weergegeven. In zekere zin kun je dit vergelijken met hoe HTML werkt, maar dan op een hoger niveau.<br>\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tAutonomie over de content\u00a0\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tIn de praktijk geeft een server-driven UI aan contentmanagers meer directe controle over hun content. Een goed voorbeeld hiervan is TUI, het grootste leisure, reis- en toerismebedrijf ter wereld. Als het gaat om het helpen van reizigers bij het ori\u00ebnteren, kiezen en boeken van hun volgende vakantiebestemming, speelt content een cruciale rol. DEPT\u00ae werkte samen met TUI om een server-driven UI toe te passen om een vloeiende en contentrijke ervaring te cre\u00ebren die wordt beheerd door een flexibel CMS. Bekijk deze <a href=\"https:\/\/mijnselectie.tui.nl\/brochure\/6033c02237eadc001b2de16c\/select\" target=\"_blank\" rel=\"noreferrer noopener\">gepersonaliseerde selectie<\/a> van reisbureau Joost (fictief). Door een paar simpele selecties te maken in het CMS wordt content uit verschillende bronnen samengesteld om te matchen met de specifieke interesses van de klant.\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tBest practices voor server-driven UI\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tAls verbeterde methode om content te leveren en te presenteren, zien we dat veel organisaties momenteel de stap maken naar component-based content modelling met behulp van server-driven UI. Houd bij het maken van deze overstap rekening met de volgende praktische tips:\t<\/p>\n\n<div class='block-panel-with-rich-text__item'><div class='block-panel-with-rich-text__item-inner'><ul class=\"lists lists__color--richBlack lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li><strong>Geef jouw componenten een naam:<\/strong> zorg er vanaf het begin voor dat je jouw componenten de juiste en beschrijvende namen geeft die gemakkelijk te zoeken en te gebruiken zijn. Des te logischer componenten worden genoemd, hoe gemakkelijker contentmanagers ermee kunnen werken.<\/li><li><strong>Overweeg configuraties<\/strong>: niet elke verschillende instantie van content vereist een nieuwe component. Overweeg een configuratie toe te voegen waarmee je de presentatie kunt aanpassen, zoals bijvoorbeeld de optie om een extra CTA-knop toe te voegen en de knopkleur te wijzigen.<\/li><li><strong>Modelleer jouw inhoud:<\/strong> hoewel de server-driven UI meer creatieve vrijheid biedt, is het geenszins bedoeld als een <em>God mode<\/em>. Vooral bij grotere teams die vanuit verschillende locaties werken, helpt het echt om een reeks normen vast te leggen waaraan je je moet houden in een style guide of brandbook. Zo kun je bijvoorbeeld zelf bepalen hoe een standaard blogpost moet worden opgebouwd of hoe bepaalde onderdelen moeten worden gebruikt.<\/li><\/ul><\/div><\/div>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tBen je klaar om je content naar een hoger niveau te tillen? Onze technische teams staan klaar om je te helpen de gebruikerservaringen voor zowel jouw klanten als contentmanagers te verbeteren.\t<\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F&#038;text=Build%20better%20experiences%20with%20server-driven%20UI\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fbuild-better-experiences-with-server-driven-ui%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/build-better-experiences-with-server-driven-ui\/\"\n\t\t\t\tdata-share-title=\"Build better experiences with server-driven UI\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-highlighted-item-listing\">\n\t<h2\t\tclass=\"typography block-highlighted-item-listing__title typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tMeer artikelen?\t<\/h2><a\tclass=\"cta-button block-highlighted-item-listing__cta-button cta-button__color--onyxGrey cta-button__style--regular\" href=\"https:\/\/www.deptagency.com\/nl-nl\/all-insights\/\" >\n\t\n\t\t\t<span>\n\t\t\tAlle artikelen bekijken\t\t<\/span>\n\t\n<\/a>\n\t<div class=\"block-highlighted-item-listing__cards\">\n\t\t<a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/dept-strong-performer-forrester-wave-commerce-services-q1-2026\/\"\n\t\t\t\ttitle=\"DEPT\u00ae named a Strong Performer in The Forrester Wave\u2122: Commerce Services, Q1 2026\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/02\/Forrester-_-2026-_-Insight-_-Phrase-16_9.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"DEPT\u00ae named a Strong Performer in The Forrester Wave\u2122: Commerce Services, Q1 2026\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tCOMMERCE&emsp;\u2022&emsp;Carryn Quibell\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>DEPT\u00ae named a Strong Performer in The Forrester Wave\u2122: Commerce Services, Q1 2026<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/dept-brings-its-cannes-style-moments-year-round-with-future-club\/\"\n\t\t\t\ttitle=\"DEPT\u00ae brings its Cannes-Style moments year-round with Future Club\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/02\/DFC-INSIGHT-IMAGE-1-1080X1350.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"DEPT\u00ae brings its Cannes-Style moments year-round with Future Club\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tNEWS&emsp;\u2022&emsp;Marjan Straathof\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>DEPT\u00ae brings its Cannes-Style moments year-round with Future Club<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/chatgpt-ads-the-next-phase-of-ai-driven-discovery\/\"\n\t\t\t\ttitle=\"ChatGPT ads &amp; the next phase of AI-driven discovery\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Ads-1920x1080-1.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"ChatGPT ads &amp; the next phase of AI-driven discovery\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tAI TRANSFORMATION&emsp;\u2022&emsp;Jenna Gardner\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>ChatGPT ads &amp; the next phase of AI-driven discovery<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a>\t<\/div>\n<\/div>\n\n<div class=\"block-get-in-touch js-block-get-in-touch\">\n\t<div class=\"block-get-in-touch__column block-get-in-touch__column--left block-get-in-touch__column--richBlack\">\n\t\t<h2 class=\"heading heading__color--white heading__size--xl heading__align--left block-get-in-touch__heading\">\n\t\t\tVragen?\t<\/h2>\t<\/div>\n\n\t<div class=\"block-get-in-touch__column block-get-in-touch__column--right block-get-in-touch__column--white\">\n\t<div\n\t\tclass=\"image-wrap block-get-in-touch__image-wrap\"\n\t\tdata-align=\"top center\"\n\t\t\t>\n\n\t\t\t<div style=\"background-image:url(https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/Jasper-Steenweg.jpg)\" class=\"image image--bg block-get-in-touch__image\" ><\/div>\n\t\n\t<\/div>\t\t\t<div class=\"block-get-in-touch__specialist\">\n\t\t\t\t<p class=\"heading heading__color--richBlack heading__size--xxs heading__align--left block-get-in-touch__subtitle\">\n\t\t\tIntegrations Director\t<\/p><h3 class=\"heading heading__color--richBlack heading__size--m heading__align--left block-get-in-touch__person-title\">\n\t\t\tJasper Steenweg\t<\/h3>\t\t\t<\/div>\n\t\t\n\t\t<button\tclass=\"cta-bar block-get-in-touch__cta-bar js-cta-bar\"\n\tid=\"block-get-in-touch-49619632e198ca6f02b85962e5177088\"\n\ttitle=\"Get in touch\"\n\taria-label=\"\"\n\t\t>\n\t<div class=\"cta-bar__container cta-bar__container--size--default\">\n\t\t<div class=\"cta-bar__content\">\n\t\t\t<span class=\"cta-bar__label\">\n\t\t\t\tGet in touch\t\t\t<\/span>\n\t\t\t<i class=\"icon icon icon__color--white icon__size--small icon__arrow-right-circle cta-bar__icon cta-bar__icon\">\n\t<svg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http:\/\/www.w3.org\/2000\/svg'><g class='symbol'><path d='M11.5215 17.2609L17.2607 12L11.5215 6.73912' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><path d='M16.7827 12L6.26099 12' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><circle cx='12' cy='12' r='11' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><\/g><path class='symbol-hover' fill-rule='evenodd' clip-rule='evenodd' d='M23 12C23 5.92487 18.0751 0.999999 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12ZM17.7674 11.4471L12.0283 6.18627L11.0147 7.292L15.3326 11.25L6.26099 11.25L6.26099 12.75L15.3326 12.75L11.0147 16.708L12.0283 17.8137L17.7675 12.5529L18.3706 12L17.7674 11.4471Z' fill='currentColor'\/><\/svg><\/i>\t\t<\/div>\n\t<\/div>\n<\/button>\t<\/div>\n<\/div>\n\n<div\n\tclass=\"flyout-drawer js-flyout-drawer flyout-drawer__position--right\"\n\tdata-trigger=\"#block-get-in-touch-49619632e198ca6f02b85962e5177088\"\n\tdata-instant-open=\"false\"\n>\n\t<div class=\"flyout-drawer__left-mobile-backplate\"><\/div>\n\t<div class=\"flyout-drawer__left-backplate\"><\/div>\n\n\t\t<div class=\"flyout-drawer__left\"><\/div>\n\n\t<button\tclass=\"cta-button flyout-drawer__close cta-button__color--white cta-button__style--text-and-icon js-drawer-close has-flipped-icon\" aria-label=\"Close\" >\n\t<svg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='10.5' cy='10.5' r='9.5' transform='rotate(-90 10.5 10.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='10.5' cy='10.5' r='9.5' transform='rotate(-90 10.5 10.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='m14 7-7 7m0-7 7 7' stroke='var(--dept-button-icon-color)' stroke-width='1.5' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tClose\t\t<\/span>\n\t\n<\/button>\n\t<div class=\"flyout-drawer__right\">\n\t\t<div class=\"pardot-forms block-get-in-touch__pardot-forms js-pardot-forms\">\n\t\t<iframe\n\t\tdata-initial-src=\"https:\/\/www2.deptagency.com\/l\/321011\/2018-03-15\/91tf6f\"\n\t\tclass=\"pardot-forms__embed block-get-in-touch__embed js-pardot-forms-embed\"\n\t\ttype=\"text\/html\"\n\t><\/iframe>\n\t<div class=\"loader pardot-forms__loader loader__color--hanPurple js-pardot-forms-loader\">\n\t<div class=\"loader__first\"><\/div>\n\t<div class=\"loader__second\"><\/div>\n<\/div><\/div>\t<\/div>\n\n\t<button\tclass=\"cta-button flyout-drawer__back cta-button__color--onyxGrey cta-button__style--text-and-icon js-drawer-back has-small-icon\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack\t\t<\/span>\n\t\n<\/button><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":27,"featured_media":4269605,"template":"","meta":{"_acf_changed":false,"es_utils_meta_schema":"","member_job_title":"","member_linkedin_url":"","dept_alt_featured_image":[],"dept_algolia_noindex":false,"dept_algolia_featured":false,"footnotes":""},"person":[373],"insight-topics":[42716],"class_list":["post-4269604","article","type-article","status-publish","has-post-thumbnail","hentry"],"acf":{"dept_is_3q_page":false,"dept_insight_featured":true,"dept_current_cpt_partner":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Build better experiences with server-driven UI - DEPT\u00ae<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build better experiences with server-driven UI - DEPT\u00ae\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"DEPT\u00ae\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T11:42:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"296\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/\"},\"author\":{\"name\":\"Marjan Straathof\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#\\\/schema\\\/person\\\/aafafcb93bf5459b0ececd4e961a3939\"},\"headline\":\"Build better experiences with server-driven UI\",\"datePublished\":\"2021-11-01T10:11:30+00:00\",\"dateModified\":\"2025-12-08T11:42:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/\"},\"wordCount\":6,\"image\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Server-driver-UI.png\",\"inLanguage\":\"en-AU\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/\",\"name\":\"Build better experiences with server-driven UI - DEPT\u00ae\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Server-driver-UI.png\",\"datePublished\":\"2021-11-01T10:11:30+00:00\",\"dateModified\":\"2025-12-08T11:42:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#breadcrumb\"},\"inLanguage\":\"en-AU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Server-driver-UI.png\",\"contentUrl\":\"https:\\\/\\\/www.deptagency.com\\\/wp-content\\\/uploads\\\/2021\\\/11\\\/Server-driver-UI.png\",\"width\":512,\"height\":296},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/insight\\\/build-better-experiences-with-server-driven-ui\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.deptagency.com\\\/en-au\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build better experiences with server-driven UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#website\",\"url\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/\",\"name\":\"DEPT\u00ae\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-AU\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.deptagency.com\\\/en-uki\\\/#\\\/schema\\\/person\\\/aafafcb93bf5459b0ececd4e961a3939\",\"name\":\"Marjan Straathof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25a0575c513faebaf9174b2581018adbceef2e5499d343cd6ca9ccca679e1f7f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25a0575c513faebaf9174b2581018adbceef2e5499d343cd6ca9ccca679e1f7f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25a0575c513faebaf9174b2581018adbceef2e5499d343cd6ca9ccca679e1f7f?s=96&d=mm&r=g\",\"caption\":\"Marjan Straathof\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build better experiences with server-driven UI - DEPT\u00ae","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/","og_locale":"en_US","og_type":"article","og_title":"Build better experiences with server-driven UI - DEPT\u00ae","og_url":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/","og_site_name":"DEPT\u00ae","article_modified_time":"2025-12-08T11:42:12+00:00","og_image":[{"width":512,"height":296,"url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#article","isPartOf":{"@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/"},"author":{"name":"Marjan Straathof","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/aafafcb93bf5459b0ececd4e961a3939"},"headline":"Build better experiences with server-driven UI","datePublished":"2021-11-01T10:11:30+00:00","dateModified":"2025-12-08T11:42:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/"},"wordCount":6,"image":{"@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png","inLanguage":"en-AU"},{"@type":"WebPage","@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/","url":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/","name":"Build better experiences with server-driven UI - DEPT\u00ae","isPartOf":{"@id":"https:\/\/www.deptagency.com\/en-uki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#primaryimage"},"image":{"@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png","datePublished":"2021-11-01T10:11:30+00:00","dateModified":"2025-12-08T11:42:12+00:00","breadcrumb":{"@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#breadcrumb"},"inLanguage":"en-AU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/"]}]},{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#primaryimage","url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png","contentUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/11\/Server-driver-UI.png","width":512,"height":296},{"@type":"BreadcrumbList","@id":"https:\/\/www.deptagency.com\/insight\/build-better-experiences-with-server-driven-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.deptagency.com\/en-au\/"},{"@type":"ListItem","position":2,"name":"Build better experiences with server-driven UI"}]},{"@type":"WebSite","@id":"https:\/\/www.deptagency.com\/en-uki\/#website","url":"https:\/\/www.deptagency.com\/en-uki\/","name":"DEPT\u00ae","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.deptagency.com\/en-uki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-AU"},{"@type":"Person","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/aafafcb93bf5459b0ececd4e961a3939","name":"Marjan Straathof","image":{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/secure.gravatar.com\/avatar\/25a0575c513faebaf9174b2581018adbceef2e5499d343cd6ca9ccca679e1f7f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/25a0575c513faebaf9174b2581018adbceef2e5499d343cd6ca9ccca679e1f7f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25a0575c513faebaf9174b2581018adbceef2e5499d343cd6ca9ccca679e1f7f?s=96&d=mm&r=g","caption":"Marjan Straathof"}}]}},"_links":{"self":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight\/4269604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight"}],"about":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/users\/27"}],"version-history":[{"count":1,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight\/4269604\/revisions"}],"predecessor-version":[{"id":4374446,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight\/4269604\/revisions\/4374446"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/media\/4269605"}],"wp:attachment":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/media?parent=4269604"}],"wp:term":[{"taxonomy":"person","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/person?post=4269604"},{"taxonomy":"insight-topic","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight-topics?post=4269604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}