Tag: frontend personalisation

  • Edge Functions for Frontend Designers: What Cloudflare Workers and Vercel Edge Actually Mean for UK Web Performance

    Edge Functions for Frontend Designers: What Cloudflare Workers and Vercel Edge Actually Mean for UK Web Performance

    Edge computing sounds like something a backend engineer should explain to you whilst you nod politely and think about font weights. I get it. The infrastructure layer has historically been not-your-problem, and for a long time that was fine. But edge functions have crossed a line. They are now genuinely useful to frontend designers and developers in ways that directly affect the things you spend your days obsessing over: page speed, personalisation, A/B testing, and whether your LCP score makes you want to cry.

    This is my attempt to explain edge functions as a frontend concern, not an ops concern, with real-world patterns UK teams are actually shipping in 2026.

    Frontend developer writing edge functions for performance improvements on a dark-themed code editor
    Photo by Daniil Komov on Pexels

    What edge functions actually are (without the waffle)

    A traditional web request goes: user’s browser, CDN cache, your origin server somewhere in a data centre. The origin might be in London if you’re lucky, Dublin if you’re using AWS eu-west-1, or somewhere entirely unhelpful if you never thought about it. Every uncached request hits that server, adds latency, and makes your Time to First Byte worse.

    Edge functions run code at CDN nodes, physically close to the user. Cloudflare has over 300 data centre locations globally. Vercel’s edge network is similar in concept. When a request comes in, instead of bouncing all the way to your origin, a small piece of JavaScript (or TypeScript) runs at the nearest node and returns a response. We’re talking single-digit millisecond execution in many cases.

    The key constraint worth knowing: edge functions are not Node.js. They run in a V8 isolate environment, which means no file system access, limited APIs, and very short execution windows. That constraint is actually what makes them useful for the frontend layer, because it forces you to keep edge logic small and sharp.

    Why this matters for edge functions frontend performance UK specifically

    UK users suffer more latency than they should from services hosted without European region configuration. If your Next.js app’s API routes are running serverless functions in us-east-1 because nobody changed the default, every dynamic request is crossing the Atlantic. Vercel’s edge runtime and Cloudflare Workers both put execution closer to the UK, and the difference in TTFB can be 200-400ms on uncached requests. That is not trivial when UK Core Web Vitals data shows that LCP and INP failures correlate directly with conversion drops on British e-commerce and SaaS sites.

    The Cloudflare network has a major presence in London (Docklands), Manchester, and Edinburgh. Vercel routes UK traffic through Frankfurt and Amsterdam primarily, with London capacity added in 2024. Either way, you are getting dramatically closer to your users than a single-region origin server.

    Three concrete things you can do with edge functions without a backend engineer

    1. Personalisation without client-side flicker

    The standard approach to personalisation in a React or Next.js app is: render the generic page, load JavaScript, check a cookie or API call, then swap in the personalised content. Users see a flash of the wrong content. It is grim, and it tanks your LCP because the meaningful content arrives late.

    Edge functions fix this by reading cookies and headers before the HTML is assembled. A Vercel Edge Middleware file (literally middleware.ts in your project root) can inspect the incoming request, check a user segment cookie, and rewrite the URL to a different version of the page before the browser sees anything. The user gets personalised HTML on the first response. No flicker, no extra round trip, no bespoke backend logic required.

    A practical example: a UK SaaS product serving both SME and enterprise tiers can serve entirely different homepage layouts based on a cookie set at signup, handled entirely in around 20 lines of TypeScript at the edge. No server, no database call, no delay.

    2. A/B testing that doesn’t torch your Core Web Vitals

    Client-side A/B testing with tools like Google Optimize (now retired) or its replacements typically inject test logic after the page loads. The result is layout shift, delayed LCP, and Cumulative Layout Shift scores that your performance audit will flag immediately. Edge-based A/B testing sidesteps this entirely.

    The pattern is straightforward. Your edge function generates or reads a test bucket (usually a random assignment stored in a cookie), then serves bucket A or bucket B of your HTML before the response leaves the CDN. From the browser’s perspective, there is only ever one version of the page. The Cloudflare Workers documentation has solid examples of this pattern using the HTMLRewriter API, which lets you modify HTML at the edge without reconstructing the entire response.

    I’ve used this pattern on a Next.js project for a UK fintech startup. We ran a button colour test (yes, really, the client insisted) across 50,000 monthly visitors without touching the origin deployment or writing a single line of backend code. The Lighthouse scores stayed identical between variants because the HTML was identical in structure, just different in content.

    3. Geolocation-based content without a postcode lookup API

    Cloudflare Workers and Vercel Edge both expose request geolocation headers automatically. cf-ipcountry in Cloudflare, and x-vercel-ip-country and x-vercel-ip-city in Vercel. You can use these to show UK-specific pricing (£ GBP, VAT-inclusive), route Scottish users to Scottish Gaelic content variants, or surface region-relevant promotions, all without a database call or a paid IP geolocation API.

    This is particularly useful for UK e-commerce sites that need to show duty-included pricing to GB users whilst showing export pricing to EU visitors post-Brexit. Handling that at the edge means the correct price is in the HTML from the first byte. No price flicker, no client-side currency swap, no additional JavaScript bundle weight.

    The Vercel vs Cloudflare choice for UK frontend teams

    If you are already deploying on Vercel, the edge runtime is the path of least resistance. Your middleware.ts file is just part of the project, it deploys automatically, and the routing primitives are well-documented. The limitation is that Vercel’s edge functions are tightly coupled to their platform, so you are buying into that ecosystem.

    Cloudflare Workers are more portable and more powerful. You can run them in front of any origin, including a Vercel deployment, which is a combination I have seen UK agencies use to get the best of both. Workers also have access to Cloudflare’s KV store (a globally replicated key-value database) and Durable Objects for stateful logic, which opens up patterns that Vercel middleware simply cannot do.

    For a solo developer or small UK agency, Vercel’s free tier is generous enough for most projects. Cloudflare Workers’ free tier gives you 100,000 requests per day, which is reasonable for prototyping. The paid tiers for both are reasonable once you are shipping something with real traffic.

    What edge functions cannot do (and why you still need some backend)

    Edge functions are stateless and fast, which means they are the wrong tool for heavy computation, database writes, large payload processing, or anything requiring persistent connections. You still need an actual backend (or a serverless function in a proper runtime) for those things. The edge layer is the routing and transformation layer, not the application logic layer.

    I’d also point out that cold start times, whilst dramatically better than traditional serverless functions, are not zero. Vercel’s edge functions typically have sub-1ms cold starts. Cloudflare Workers are similar. But if your logic becomes complex enough, you will want to profile it. The edge environment rewards small, focused functions.

    One thing this connects to for design teams: if you are building a Micro-SaaS product as a solo developer and you have been putting off personalisation because it felt like infrastructure work, edge middleware genuinely removes that blocker. You do not need a dedicated backend engineer to implement sensible routing logic in 2026.

    Getting started without breaking anything

    My recommendation: start with a read-only middleware. Something that inspects a cookie or a header and adds it to a request header for downstream consumption. This is zero-risk, teaches you the API surface, and gives you something to show in a pull request. Once that is merged and boring, move to URL rewrites. Then cookie setting. Then A/B bucket assignment. Each step is independently reversible.

    The Vercel middleware documentation is genuinely good. The Cloudflare Workers quick-start is also excellent, and the playground at workers.cloudflare.com lets you write and test Workers in the browser with live request inspection. Both platforms have strong TypeScript support, which matters if you are working on a codebase where designer-developer handoff is already type-driven.

    Edge functions are not magic, but they are one of the more genuinely useful infrastructure concepts to land in the frontend toolkit in the last few years. The performance gains are real, the personalisation patterns are practical, and the barrier to entry is low enough that a frontend developer comfortable with TypeScript can be productive within an afternoon. That is a rare combination in infrastructure land.