[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-hoe-dichtbij-de-gebruiker-moet-jouw-code-draaien-i18n-slugs":132,"language-blog-slug-nl-hoe-dichtbij-de-gebruiker-moet-jouw-code-draaien":139},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","how-close-to-the-user-should-your-code-be",{"locale":137,"value":138},"nl","hoe-dichtbij-de-gebruiker-moet-jouw-code-draaien",{"page":140},{"slug":138,"i18nSlugs":141,"social":144,"title":146,"subtitle":79,"isArchived":149,"headerIllustration":150,"date":154,"authors":155,"introTitle":164,"items":165,"pivots":242,"relatedBlogPosts":254,"tags":273,"onMountedScript":158,"onUnmountedScript":158},[142,143],{"locale":134,"value":135},{"locale":137,"value":138},{"title":145,"description":146,"image":147},"Serverless & edge compute","Hoe dichtbij de gebruiker moet jouw code draaien?",{"url":148},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761816932-jasper-blog.jpg",false,{"url":151,"alt":104,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761815991-2025-10-30_jasper-blog-transparent.png",554,451,"2025-10-30T10:07:10.411+01:00",[156],{"name":157,"lastName":158,"slug":159,"image":160},"Jasper","","jasper",{"url":161,"alt":104,"width":162,"height":163},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,"Als front-end ontwikkelaars denken we vaak na over wat onze code doet. Maar steeds vaker is waar die code draait minstens zo belangrijk. Serverless en edge computing geven ons nieuwe mogelijkheden om logica dichter bij de gebruiker te plaatsen. De juiste plek kiezen is daarbij lang niet altijd vanzelfsprekend.",[166,170,174,178,187,190,194,199,202,206,210,213,217,220,223,229,232,238],{"__typename":167,"id":168,"title":158,"body":169},"TextSectionRecord","dAnSuqb9Qs-B5FbEitAXWg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Moet je content personaliseren aan de edge? Kun je alles in serverless functions draaien? Wanneer is een eenvoudige CDN voldoende? En wanneer heb je nog steeds een ouderwetse server nodig?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">In deze blog leg ik uit hoe je bepaalt waar verschillende onderdelen van je applicatie moeten draaien. Ik laat zien hoe performance, schaalbaarheid en vendor lock-in invloed hebben op die keuze.  Ook deel ik hoe we bij De Voorhoede klanten helpen om features te koppelen aan infrastructuur. En hoe je veelgemaakte fouten voorkomt bij het toevoegen van moderne tooling aan bestaande systemen.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":171,"title":172,"body":173},"HHWXFCumTay8qLB-o8sCIA","Je kunt geen supercomputer in ieders broekzak stoppen","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ik ben dol op moderne technologie. Bij De Voorhoede pionieren we er graag mee.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">Maar in alles wat we bouwen, zetten we de gebruiker voorop. En onze gebruikers? Die geven niets om welke technologie we kiezen of waar onze code draait. Ze willen gewoon een snelle, soepele en persoonlijke ervaring.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het is verleidelijk om te denken dat code die dichter bij de gebruiker draait altijd sneller voelt. In veel gevallen klopt dat.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">Minder latency - de tijd tussen interactie, code-uitvoering en UI-update - maakt een groot verschil.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Maar performance draait niet alleen om afstand. Het draait ook om rekenkracht. Wat het apparaat kan doen zodra het verzoek aankomt, bepaalt minstens zoveel.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Aan de client-kant hebben we geen controle over het apparaat van de gebruiker. Het kan een gloednieuwe iPhone zijn, of een zes jaar oude Android met tien tabbladen open.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">Aan de serverkant hebben we die controle wel. We kunnen machines kiezen met meer CPU, geheugen of zelfs GPU-acceleratie.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">De ideale situatie is lage latency én hoge capaciteit. Dat klinkt geweldig, maar is zelden realistisch.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> Overal krachtige servers neerzetten is duur en lastig te schalen. En voor de meeste toepassingen is het simpelweg overkill. Je hebt geen supercomputer aan de edge nodig om iemands naam te tonen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Wanneer we een applicatie ontwerpen, balanceren we voortdurend tussen latency en capaciteit.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">Er bestaat geen universele oplossing. Het hangt af van wat elke feature nodig heeft.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">Laten we de opties bekijken en zien waar ze goed (of minder goed) in zijn.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":175,"title":176,"body":177},"IOhunYPXR1urQT1en1_8iQ","Gecentraliseerde servers: alles op één plek","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Voordat we edge runtimes, serverless functies en wereldwijde CDNs hadden, draaiden de meeste webapplicaties op één centrale server. Veel doen dat nog steeds.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Een centrale server bundelt alles op één plek: compute, file storage, databaseverbindingen, templates en assets.  Het is makkelijk te begrijpen en eenvoudig te beheren. Toen Node.js opkwam, werd de server ook onderdeel van ons domein bij De Voorhoede.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":180,"image":181,"caption":158,"fullWidth":149,"captionPosition":186},"ImageRecord","QH_5SqB5TN-oQEM4dLQ0Hg",{"url":182,"alt":183,"width":184,"height":185},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761813583-2025-10-20_jasper-blog-1.jpg","Users, Latency and Concurrency",1600,892,"bottom",{"__typename":167,"id":188,"title":158,"body":189},"QkzoZFQJQwq94ZCZwsqBoQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Tegenwoordig draaien centrale servers vaak in containers zoals Docker of Kubernetes. Deze tools maken het makkelijker om consistente omgevingen te deployen, workloads te schalen en tussen cloudproviders te wisselen. Toch blijft de architectuur grotendeels hetzelfde. Gebruikersverzoeken gaan naar één centrale locatie waar alles gebeurt.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Wanneer werkt dit model goed?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Je gebruikers zitten geografisch dicht bij de server, bijvoorbeeld een Nederlandse organisatie met Nederlandse gebruikers.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Je verkeer is voorspelbaar en goed te dimensioneren.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Je wilt volledige controle over runtime en omgeving.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Je applicatie heeft zware compute-taken of afhankelijkheden die niet goed werken in gedistribueerde omgevingen.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Wat zijn de nadelen?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Latency:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> gebruikers verder weg merken vertraging, hoe goed je code ook is.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cb>Schaalbaarheid:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> een enkele server heeft beperkte capaciteit. Piekverkeer vraagt over-provisioning of complexe orchestratie.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cb>Beperkingen in flexibiliteit:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> alles draait op dezelfde plek. Zodra je functies verspreidt, ontstaat snel complexiteit.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">En natuurlijk slaan we hier een groot onderwerp over: \u003C\u002Fspan>\u003Cb>databases\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">.  Dat is een wereld op zich.  Voor nu is het genoeg om te zeggen dat centrale servers vaak dicht bij hun database staan, en dat is niet zonder reden.  Ze profiteren van lage latency, stabiele verbindingen en voorspelbare prestaties.  Die nabijheid heeft ook een nadeel: het bindt je infrastructuur aan een fysieke locatie.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Kort samengevat geeft een centrale server je veel controle, kracht en eenvoud. Maar dat werkt alleen als de behoeften van je applicatie, je gebruikers en je verkeerspatronen allemaal rond dat ene punt samenkomen.  Laten we nu kijken wat er gebeurt wanneer we onderdelen van het systeem gaan verdelen. We beginnen bij de eerste stap in die richting:\u003C\u002Fspan>\u003Cb> CDNs.\u003C\u002Fb>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 57f1f17a-4d92-427a-8ae8-2ac74719f19c -->\u003C\u002Fp>",{"__typename":167,"id":191,"title":192,"body":193},"RCdXtl5hTNmccaYyaAkGag","CDNs, de eerste stap naar de edge: statische bestanden dichter bij de gebruiker","\u003Cp>\u003Cspan style=\"font-weight: 400;\">CDNs waren de eerste grote stap om het web dichter bij de gebruiker te brengen, al ging het toen alleen nog om statische bestanden. Ze verlagen de latency en nemen werk uit handen van je origin servers. Maar ze zijn ook beperkt, omdat ze geen logica kunnen uitvoeren of data kunnen ophalen. Begrijpen waar CDNs sterk in zijn en waar niet, is cruciaal om te beslissen waar front-end features moeten draaien.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cb>Wat CDNs goed doen, is eenvoudig. Ze serveren statische bestanden, HTML, CSS, JavaScript en afbeeldingen, vanaf servers die fysiek dichter bij de gebruiker staan.\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Dat vermindert latency en bandbreedtekosten en maakt het eenvoudig om wereldwijd te schalen zonder extra infrastructuur op te zetten.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":195,"image":196,"caption":158,"fullWidth":149,"captionPosition":186},"OW818dvWT9SwKDlETCbaaQ",{"url":197,"alt":183,"width":184,"height":198},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761813589-2025-10-20_jasper-blog-2.jpg",891,{"__typename":167,"id":200,"title":158,"body":201},"JpTJSVV_StqOIDzX1sIhWw","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Voor ons bij \u003C\u002Fspan>\u003Cb>De Voorhoede\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> werden CDNs echt interessant met de opkomst van de \u003C\u002Fspan>\u003Cb>JAMstack\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">. Vooraf gerenderde HTML, gedeployed naar een CDN, maakte websites razendsnel en goedkoop om te hosten. Dankjewel Netlify. Het maakte ook de weg vrij voor headless architecturen, waarbij de front-end losgekoppeld is van CMS’en, commerce-engines en back-end systemen. Dat gaf ons een enorm voordeel. We konden aan de front-end blijven doorontwikkelen zonder afhankelijk te zijn van back-end teams. Preview-omgevingen werden de norm. In plaats van één acceptatie- en één productieomgeving kregen we een nieuwe deploy bij elke pull request. Het was snel, eenvoudig en gaf veel vrijheid.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Maar CDNs hebben hun grenzen. Een CDN is in de kern een server-side cache. Dat is perfect voor performance, maar beperkt in flexibiliteit. Je hebt een doordachte invalidatiestrategie nodig, bijvoorbeeld op tijd (\u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">max-age\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">stale-while-revalidate\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">), op tags of handmatig, en uiteindelijk is de cache gedeeld. Ze kunnen geen logica uitvoeren of per gebruiker renderen. Voor dynamische situaties, zoals ingelogde gebruikers, A\u002FB-tests of gepersonaliseerde content, moet je terugvallen op client-side oplossingen of opnieuw contact maken met je origin server.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Dus hoe brengen we compute dichter bij de gebruiker?\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":203,"title":204,"body":205},"QaNMrYzISdKCmcOzz_TCEQ","Serverless functies - compute dichterbij","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Serverless functies, zoals \u003C\u002Fspan>\u003Cb>AWS Lambda\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> of \u003C\u002Fspan>\u003Cb>Google Cloud Functions\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, brengen rekenkracht dichter bij de gebruiker. Niet helemaal tot aan de edge, maar wel naar regionale servers (zoals \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">eu-central-1\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> of \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">us-west-2\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">). Ze staan dus dichterbij dan centrale servers en zijn flexibeler dan CDNs.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ze zijn eenvoudig te gebruiken. Je deployt een functie, en die draait alleen wanneer nodig, of dat nu één keer is of een miljoen keer. Ze schalen automatisch, je betaalt niet voor stilstand en ze zijn ideaal voor lichte API-logica of CMS-integraties. \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">De meeste providers ondersteunen meerdere talen, waaronder JavaScript (Node.js). Dat maakte serverless voor ons bij De Voorhoede een logische stap. We konden in dezelfde taal blijven werken, back-end logica schrijven en deze naast de front-end deployen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 9a783e11-c034-4fe5-bc06-6644dc31472b -->\u003C\u002Fp>",{"__typename":179,"id":207,"image":208,"caption":158,"fullWidth":149,"captionPosition":186},"PcEBjOyBQGKEHrRrITA8WQ",{"url":209,"alt":183,"width":184,"height":185},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761813598-2025-10-20_jasper-blog-4.jpg",{"__typename":167,"id":211,"title":158,"body":212},"OW1di0TwQA6vIKpH87g4gQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Maar serverless heeft ook nadelen:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>Stateless by design:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> elke functieaanroep start volledig opnieuw. Er is geen in-memory state en geen persistente verbindingen. Dat is prima voor lichte logica, maar wordt problematisch naarmate de applicatie groeit.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cb>Cold starts:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> functies die een tijd niet zijn gebruikt, reageren trager. De opstarttijd kan variëren van enkele honderden milliseconden tot meerdere seconden, afhankelijk van het platform en de omvang van je code.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cb>Niet alle packages werken goed:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Node.js wordt ondersteund, maar sommige libraries met native dependencies of file system access functioneren slecht. Grote packages vertragen je functies merkbaar. Probeer Prisma met GraphQL en je merkt het meteen.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003Cb>Platformspecifieke APIs:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> elke provider heeft zijn eigen manier om requests en responses te verwerken. Abstracties zoals het Serverless Framework kunnen helpen, maar voegen extra complexiteit en afhankelijkheid van de leverancier toe.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Serverless is een sterke stap richting modulaire, schaalbare infrastructuur. Maar als we nog snellere reactietijden willen en logica die draait vlak bij de gebruiker, dan is er nog een stap dichterbij: edge functions.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":214,"title":215,"body":216},"OMjnoYUBQNyQkiif7YdACg","Edge functies - compute aan je voordeur","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Met edge functies kunnen we dynamische logica draaien zo dicht bij de gebruiker als maar mogelijk is, zonder op hun eigen apparaat te draaien. Deze functies voeren code uit op dezelfde plekken waar onze statische bestanden al staan, de wereldwijde edge-locaties. Ze zijn ideaal voor lichte, latency-gevoelige taken zoals authenticatie, A\u002FB-tests, rewrites en eenvoudige API-integraties.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":218,"image":219,"caption":158,"fullWidth":149,"captionPosition":186},"d4N7E60HRvuAVrUlxC5K2A",{"url":209,"alt":183,"width":184,"height":185},{"__typename":167,"id":221,"title":158,"body":222},"c7IRCQXsSyOZUFgg6LGVuA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">In tegenstelling tot serverless functies draaien edge functies niet in containers of virtuele machines. Ze gebruiken \u003C\u002Fspan>\u003Cb>isolates\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, lichte, sandboxed omgevingen die zijn ontworpen voor snelheid en schaal. Ze bieden extreem lage latency en vrijwel geen cold starts, maar hebben strikte limieten op resources. Ook ontbreken veel Node.js-functionaliteiten waar populaire pakketten van afhankelijk zijn.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":224,"image":225,"caption":158,"fullWidth":149,"captionPosition":186},"OFOWy9OsSCmo3pNYw1QUlw",{"url":226,"alt":227,"width":184,"height":228},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761813603-2025-10-20_jasper-blog-5.jpg","Cloudflare, Deno and Bun",473,{"__typename":167,"id":230,"title":158,"body":231},"BdozTiAgRBeGCrz4GjxIjg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bekende runtimes zijn \u003C\u002Fspan>\u003Cb>Cloudflare Workers\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Cb>Deno Deploy\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> en in mindere mate \u003C\u002Fspan>\u003Cb>Bun\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">. Zoals bij serverless heeft elke runtime zijn eigen API’s en eigenaardigheden. Dat maakt overdraagbaarheid van code lastig. Gelukkig werkt de \u003C\u002Fspan>\u003Cb>WinterCG-groep\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> aan de standaardisatie van web-API’s over verschillende runtimes. Daardoor kunnen we straks web-native JavaScript schrijven dat overal draait. De \u003C\u002Fspan>\u003Cb>UnJS \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">community werkt ondertussen aan kleine, runtime-onafhankelijke utilities zoals \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">unenv\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">h3\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">unstorage\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">. Deze modules zijn ontworpen om “gewoon te werken”, ongeacht de omgeving.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Frameworks spelen een sleutelrol in het compleet maken van deze universele ontwikkelervaring. \u003C\u002Fspan>\u003Cb>Astro\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Cb>SvelteKit\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, \u003C\u002Fspan>\u003Cb>Remix\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Cb>Nuxt 3+\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> bieden runtime-adapters die je app geschikt maken voor edge-platforms zonder codewijzigingen. Deze adapters compileren je app naar de gekozen runtime en abstraheren de platform details. Zo blijft de output klein en performant. De opvallende uitzondering is \u003C\u002Fspan>\u003Cb>Next.js\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">, dat ondanks de open source licentie sterk verbonden is met Vercel en moeilijk volledig elders te draaien is.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":179,"id":233,"image":234,"caption":158,"fullWidth":149,"captionPosition":186},"ZuHLK2a_T6OkjDS7rqIkqA",{"url":235,"alt":236,"width":184,"height":237},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1761813608-2025-10-20_jasper-blog-6.jpg","Sveltekit, Remix and Nuxt3",791,{"__typename":167,"id":239,"title":240,"body":241},"WPiDasFJQLCLXufxUetd2Q","Dus, hoe dichtbij moet jouw code zijn?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het antwoord is eenvoudig: \u003C\u002Fspan>\u003Cb>zo dichtbij mogelijk, met precies genoeg kracht voor de taak.\u003C\u002Fb>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">In vastgoed geldt het gezegde: \u003C\u002Fspan>\u003Cb>location, location, location.\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Dat geldt net zo goed voor applicatielogica. Hoe dichter je code bij de gebruiker staat, hoe sneller en responsiever de ervaring voelt. Maar die snelheid komt met afwegingen. Edge runtimes zijn snel maar beperkt. Serverless voegt flexibiliteit toe, maar kost tijd. Centrale servers bieden controle, maar alleen als je gebruikers die extra afstand kunnen accepteren.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Samenvattend:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Ctable border=\"1\" height=\"405\" style=\"border-collapse: collapse;\">\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Criteria\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Cth>\n\u003Cp>\u003Cstrong>Statische CDN\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fth>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Edge Function (e.g. Workers)\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Cth>\n\u003Cp>\u003Cstrong>Regionale Serverless\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fth>\n\u003Cth>\n\u003Cp>\u003Cstrong>Gecentraliseerde Server \u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Latency (nabij gebruiker)\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">⚠️ (regionaal)\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">❌\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Schaalbaarheid (auto-scaling & volume)\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">⚠️ (infra vereist)\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Dynamische logica\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">❌\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Cold starts\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">❌\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">✅ (nagenoeg nul)\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">❌ (kan traag zijn)\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Zware berekeningen\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">❌\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">❌\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Portabiliteit (geen vendor lock-in)\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">⚠️ (runtime-specifiek)\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">⚠️ (platform-specifiek)\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\u003Cspan style=\"font-weight: 400;\">✅\u003C\u002Fspan>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\n\u003Cp>\u003Cstrong>Beste voor\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Static sites, assets\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">APIs, gepersonaliseerde UIs, A\u002FB-tests, authenticatie\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">APIs, lichte serverlogica\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003Ctd>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Monoliths, legacy systemen\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bij De Voorhoede beginnen we altijd met dezelfde vraag: \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Wat is de minst krachtige, dichtstbijzijnde optie die dit onderdeel aankan?\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Als iets statisch kan zijn, pre-renderen en cachen we het.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Als het lichte logica nodig heeft, draaien we het aan de edge.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Alleen wanneer er meer rekenkracht of persistente verbindingen nodig zijn, gebruiken we serverless of centrale servers.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">De moderne front-end gaat niet alleen over wat je bouwt, maar ook over waar je het draait. Met de tools van vandaag kunnen we die keuze nauwkeuriger maken dan ooit.\u003C\u002Fspan>\u003C\u002Fp>",[243],{"title":244,"body":158,"links":245,"mailchimpValue":158,"mailchimpName":158,"mailchimpId":158,"formType":158,"contactPerson":251},"Heb je een project waar we samen aan kunnen bouwen?",[246],{"__typename":247,"id":248,"title":249,"link":250},"InternalLinkRecord","163140953","Neem contact met ons op",{"__typename":38},{"name":157,"lastName":158,"jobTitle":252,"image":253},"CTO, Co-founder",{"url":161,"alt":104,"width":162,"height":163},[255,266],{"slug":256,"title":257,"date":258,"authors":259},"lessen-debuggen-inp","Dingen die ik leerde bij het debuggen van Interaction to Next Paint (INP)","2024-08-16T09:46:11.712+02:00",[260],{"name":261,"image":262},"Declan",{"url":263,"alt":104,"width":264,"height":265},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":267,"title":268,"date":269,"authors":270},"full-stack-front-end","Full-stack Front-end","2022-07-19T02:00:00.000+02:00",[271],{"name":157,"image":272},{"url":161,"alt":104,"width":162,"height":163},[274,301],{"id":275,"title":276,"slug":277,"blogPosts":278},"NJN9K2rdSY2pn9MvchHLtw","Strategie","strategie",[279,290,297],{"slug":280,"title":281,"date":282,"authors":283},"digitale-soevereiniteit-heroveren-op-europese-infrastructuur","Digitale Soevereiniteit Heroveren op Europese Infrastructuur","2026-01-29T12:02:28.591+01:00",[284],{"name":285,"image":286},"Luuk",{"url":287,"alt":104,"width":288,"height":289},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1721036156-luuk-edit-edit.jpg",2198,2969,{"slug":291,"title":292,"date":293,"authors":294},"toekomst-front-end-vervangbaar-ontoereikend-innovatief","De toekomst van front-end: vervangbaar, ontoereikend of innovatief?","2022-07-18T02:00:00.000+02:00",[295],{"name":157,"image":296},{"url":161,"alt":104,"width":162,"height":163},{"slug":267,"title":268,"date":269,"authors":298},[299],{"name":157,"image":300},{"url":161,"alt":104,"width":162,"height":163},{"id":302,"title":303,"slug":304,"blogPosts":305},"b-HOCOQTRJKMsff0UxhDcg","Web performance","web-performance",[306,310,314],{"slug":280,"title":281,"date":282,"authors":307},[308],{"name":285,"image":309},{"url":287,"alt":104,"width":288,"height":289},{"slug":256,"title":257,"date":258,"authors":311},[312],{"name":261,"image":313},{"url":263,"alt":104,"width":264,"height":265},{"slug":315,"title":316,"date":317,"authors":318},"front-end-at-the-edge","Front-end at the Edge","2022-10-04T02:00:00.000+02:00",[319],{"name":320,"image":321},"Vera",{"url":263,"alt":104,"width":264,"height":265},1776256140255]