Beyond Menu’s architecture for zero-latency feature flags on Next.js
Beyond Menu, a US food delivery service that connects restaurants with diners, runs its Next.js application on Vercel and serves millions of monthly visitors. As the company scaled, it adopted feature flags to support gradual rollouts, instant rollbacks, A/B testing, and trunk-based development.
The team needed a flagging solution that worked across both server and client. Because the app uses the App Router, the system also had to support React Server Components, Client Components, and multiple rendering modes—static, dynamic, and partial prerendering. With conversion sensitive to every millisecond, Beyond Menu paired Vercel’s Edge Config with Hypertune to manage flags without introducing layout shifts.
Why conventional feature flag tools fell short
Traditional feature flag and A/B testing SDKs were not designed for Beyond Menu’s serverless and edge setup on Vercel’s Node.js and Edge runtimes. The team ran into three specific problems.
Stale flags and slow initialization on the server
In serverless environments, traditional SDKs could not reliably fetch updates in the background because instances freeze between requests. Instances are also short-lived, so SDK initialization became a bottleneck that added latency to every request.
Flicker and layout shift on the client
In the browser, flags needed to be available on the first client-side render. Traditional tools required separate server and browser SDKs, with the browser SDK initializing independently of the main page load. This caused layout shift and UI flicker that degraded the user experience.
Targeting limitations
Beyond Menu operates a two-sided marketplace and needed to target features and run A/B tests for anonymous visitors, restaurants, and hostnames—not just logged-in users. Traditional tools were built primarily around logged-in users, and they also treated feature flags and A/B tests as separate systems. That fragmentation made feature rollout logic harder to manage.
A single SDK across server and client
Hypertune addressed these gaps with one SDK that works on both the server and the client. On page load, the browser SDK is hydrated from the state of the server SDK, letting Beyond Menu use flags in the first client-side render without layout shift or flicker.
The SDK is optimized for serverless and edge environments. It evaluates flag logic—including A/B tests—in memory and exposes a refresh method that can be called on each request. Configurable caching limits updates to only what is needed, minimizing latency and bandwidth usage.
By default, the SDK initializes and fetches from Hypertune Edge in typically under 25 milliseconds. Beyond Menu wanted faster, so it enabled Hypertune’s Vercel integration to sync flag logic into Edge Config, Vercel’s global data store designed for ultra-low-latency reads at the edge.
Hypertune encodes flag logic, including A/B tests, in a JSON-serializable configuration language called Hyperlang that the SDK interprets at runtime. Here is an example showing Beyond Menu’s flag for controlling a phone-order recording:
{
"recordingEnabled": {
"id": "S4fjQjxlvlZp-iQu2ThdX",
"type": "FunctionExpression",
"parameters": [
{
"id": "z_qLYfxnCCEROtA-yDM-5",
"name": "recordingEnabledArgs"
}
],
"body": {
"id": "PYIFmz8aDuhqmR5MfpeDS",
"type": "SwitchExpression",
"cases": [
{
"id": "uxf7zU4l8RRkOaUyVWYJY",
"when": {
"id": "uxf7zU4l8RRkOaUyVWYJY",
"type": "ComparisonExpression",
"a": {
"id": "Yl5OOQFt9pt0uyLJCLMXc",
"type": "GetFieldExpression",
"object": {
"id": "hR8nt_oNidp2aUzfWdKQc",
"type": "VariableExpression",
"variableId": "7eztbRoQZiAcpeFhYR9ym"
},
"fieldPath": "context > treeInfo > entityId"
},
"operator": "in",
"b": {
"id": "m5qIwGBxYkotOagAakm1M",
"type": "ListExpression",
"items": [
{
"id": "IvAzZDICbMXDpKQGb-IVm",
"type": "IntExpression",
"value": 10001
},
{
"id": "bJmuxJxTwjmTVq6RDuFFT",
"type": "IntExpression",
"value": 52064
}
]
}
},
"then": {
"id": "YICspIEzsr8CD89Tgs85w",
"type": "BooleanExpression",
"value": true
}
}
],
"default": {
"id": "wrL5fcyghlr4hdFqmlTbp",
"type": "BooleanExpression",
"value": false
},
"control": {
"id": "6RvRuA3ZezgLZ9UFHcoow",
"type": "BooleanExpression",
"value": true
}
}
}
}
Hypertune writes that JSON to Beyond Menu’s Edge Config store whenever the flag logic changes, and the SDK initializes and fetches updates directly from Edge Config instead of from Hypertune Edge:
That approach consistently yields ultra-low-latency SDK initialization on the server:
Flexible targeting with type safety
In the Hypertune UI, Beyond Menu defines feature flags with flexible targeting rules and embeds A/B tests directly into those rules. A flag can enable a feature for employees and beta users through specific rules, then use a final rule to A/B test the feature on everyone else. This lets the team manage the full rollout of a feature from a single flag.
Custom input types—such as User, Restaurant, and Platform—can be defined with fields usable in flag targeting:
Running npx hypertune generates a client with full end-to-end type safety. That means passing inputs and accessing flags yields compile-time error checks, IDE code completion, “find all references” support, and JSDoc descriptions on hover. It also enables a compiler-driven workflow for safely deprecating flags and removing their references.
Type safety also prevents invalid use of inputs in targeting rules and enables exhaustive matching on enum inputs like Platform or Environment.
All flag changes are versioned in a Git-style history, with visual diffs showing what changed and when. Just as with Git, isolated branches let the team preview flag changes before merging them through a pull request—an approach that has helped with large refactors and changes to input types. Pull requests also allow nontechnical team members such as PMs and designers to contribute, with approvals required for their changes.
Results and next steps
Beyond Menu now rolls out and A/B tests features safely with no impact on app performance, user experience, or conversion. As President and CTO Rodney Cox noted:
“We tried many tools for feature flags and A/B testing but they weren’t optimized for our Next.js and Vercel setup, so they all added latency to our app. For us, every millisecond impacts conversion. Edge Config with Hypertune was the only solution that worked for us. It fit our stack perfectly and had the best performance, efficiency and integration.”
Looking ahead, Beyond Menu plans to use Edge Config with Hypertune for more complex configuration, such as URL redirect maps, in-app copy, and marketing content. The team also intends to use Hypertune for product analytics and for machine learning loops that automatically optimize key parts of its funnel.
