Vercel News
·
实现超低延迟且对转化率无影响的功能发布
💡
原文英文，约1400词，阅读约需6分钟。
📝
内容提要
Beyond Menu是美国的一家热门食品外卖服务，他们采用了Hypertune和Vercel的Edge Config来解决无服务器环境中的功能标志和A/B测试挑战。他们的Next.js应用程序部署在Vercel上，每个月为数百万饥饿的访客提供服务。他们决定采用功能标志来逐步推出、即时回滚、A/B测试、基于主干的开发以及更容易的内部和与测试用户的协作。他们知道需要在服务器和客户端上评估功能标志和A/B测试。由于他们使用了App Router，所以解决方案需要与React Server Components、Client Components以及静态、动态和部分预渲染等不同的渲染模式一起工作。他们最终尝试了Hypertune，它非常适合他们的Next.js和Vercel设置。他们只需要安装一个在服务器和客户端上都可以工作的SDK，以便在Next.js应用程序的任何地方使用标志。他们可以在浏览器中从服务器上的SDK状态中恢复SDK，以便在第一个客户端渲染中使用标志，而不会出现布局移动或UI闪烁。SDK针对Vercel的Edge运行时进行了优化，可以在内存中评估标志逻辑，包括A/B测试，并公开了一种刷新标志逻辑的方法，他们在每个请求上调用该方法，并配置了缓存以仅在需要时获取更新。这最大限度地减少了延迟和带宽，提高了性能和效率。他们还使用Hypertune的Vercel集成将标志逻辑同步到Edge Config，这是Vercel的全局数据存
🎯
关键要点
- Beyond Menu是一家美国的食品外卖服务，每月为数百万访客提供服务。
- 他们采用功能标志来实现逐步推出、即时回滚、A/B测试和更容易的协作。
- 解决方案需要在服务器和客户端上评估功能标志和A/B测试，并兼容不同的渲染模式。
- 传统的功能标志和A/B测试工具未能优化他们的Next.js和Vercel设置。
- 服务器无状态实例导致SDK初始化成为瓶颈，增加请求延迟。
- 浏览器中的传统工具导致布局移动和UI闪烁，影响用户体验。
- Beyond Menu最终选择了Hypertune，适合他们的Next.js和Vercel设置。
- 只需安装一个SDK即可在服务器和客户端使用功能标志，避免布局移动和UI闪烁。
- SDK针对无服务器和边缘环境进行了优化，能够在内存中评估标志逻辑。
- Hypertune的Vercel集成将标志逻辑同步到Edge Config，提供超低延迟的读取。
- Hypertune允许定义灵活的功能标志和直接嵌入A/B测试，简化管理。
- 可以定义自定义输入类型以便于标志目标设置。
- 使用npx hypertune生成类型安全的客户端，确保编译时错误检查。
- 所有标志更改都有版本控制，便于查看历史更改和进行分支测试。
- Beyond Menu能够安全可靠地推出和A/B测试新功能，且不影响应用性能。
- 未来计划使用Edge Config和Hypertune管理更复杂的应用配置和产品分析。
🏷️
标签
➡️
