使用 Next.js 和 Vercel 构建实时停电地图
TL;DR · AI 摘要
Endeavour Energy 通过 Next.js + Vercel 重构实时停电地图，实现亚秒级加载、5分钟数据同步和38%部署提速，彻底解决风暴期间流量激增导致的系统瓶颈。
核心要点
- 使用 Next.js + Vercel 实现前端亚秒级加载，应对风暴期间17倍峰值流量。
- 通过 Supabase 管理实时数据层，将数据同步周期从1小时压缩至5分钟。
- 采用无头架构分离前端、CMS与数据层，部署效率提升38%，无需迁移 Sitecore。
结构提纲
按章节快速跳转。
Endeavour Energy 的停电地图在风暴期间遭遇流量激增，旧系统无法支撑实时更新与快速加载。
前端与内容层紧耦合导致部署缓慢，数据刷新需1小时以上，严重影响用户获取准确信息。
页面加载<1秒，数据同步5分钟，部署效率提升38%，系统自动应对流量高峰。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- 实时停电地图架构重构
- 核心挑战
- 风暴引发17倍流量
- 旧系统响应慢、不可靠
- 技术方案
- Next.js + Vercel 前端
- Supabase 实时数据层
- Sitecore 保留内容管理
- 关键成果
- 亚秒级加载
- 5分钟数据同步
- 部署提速38%
金句 / Highlights
值得收藏与分享的关键句。
风暴高峰期实现亚秒级页面加载——对在黑暗中、信号微弱环境下查看地图的用户至关重要。
所有上游系统实现5分钟数据同步周期——从数小时缩短至5分钟，确保风暴期间数据实时准确。
相比旧平台部署效率提升38%——无需迁移 CMS 即可实现快速迭代。
4 分钟阅读
2026 年 5 月 28 日
[链接到标题](https://vercel.com/blog/building-a-real-time-power-outage-map-with-next-js-on-vercel#endeavour-energy-on-vercel) Endeavour Energy 在 Vercel 上的实践
- 高峰风暴流量期间，页面加载时间低于 1 秒
- 所有上游系统每五分钟同步一次数据
- 部署速度比之前平台快 38%
当夏季风暴席卷澳大利亚新南威尔士州时，数十万人会打开同一个页面：Endeavour Energy 停电地图。
在最严重的风暴中，人们会在黑暗中、用信号微弱的手机查看该地图，而屋外的电线杆可能还被倒下的树木压着。他们只想要一件事：快速获取准确的信息。
Endeavour Energy 是澳大利亚最大的电力分销商之一，为新南威尔士州超过 280 万居民提供服务。该地区经常遭遇风暴，每当风暴来袭，这张停电地图就成了公司的“门面”。长期以来，它也成了性能瓶颈——流量激增恰逢性能最关键时刻，而在迁移到 Vercel 之前，底层平台无法应对这种压力。
[链接到标题](https://vercel.com/blog/building-a-real-time-power-outage-map-with-next-js-on-vercel#every-storm-exposed-faulty-infrastructure) 每次风暴都暴露出基础设施缺陷
之前的架构将前端与内容层紧密耦合，导致部署缓慢、扩展困难。实时更新需要手动协调，在高负载下不可靠。本应只需 10 分钟的刷新周期，有时会延长至一小时甚至更久——而这正是地图最需要保持最新状态的时候。
停电地图难以扩展，更新速度缓慢。即使是微小的编辑修改也可能耗时整整一天，结构性变更则需要更长时间。然而，速度才是核心：在风暴期间，客户需要的是几分钟内就能获得的准确信息，而不是几小时。
我们的停电地图在风暴期间是网站上最重要的功能。在使用 Vercel 之前，它既不快速也不准确，这意味着我们辜负了所服务的民众。
Rebecca Hill，外部传播与品牌经理 @ Endeavor Energy
每次风暴都会带来堪比产品发布的流量高峰，但没有人能选择风暴何时来临——它自己决定。若没有能自动吸收流量峰值的基础设施，团队就必须全年按约 17 倍正常流量配置资源，自行搭建预览环境以便运营和工程团队并行审查变更，并维护定时任务以确保上游数据持续流动。
每一个临时解决方案都是对工程团队的季度性负担，修补只会增加更多需要维护的代码。因此，他们决定基于 Next.js 和 Vercel 重建整个系统。
[链接到标题](https://vercel.com/blog/building-a-real-time-power-outage-map-with-next-js-on-vercel#three-layers,-scaling-on-their-own-terms) 三层架构，按自身节奏扩展
Endeavor 的工程团队选择了在 Vercel 上构建无头架构。他们首先将前端从 Sitecore 迁移至 Next.js，随后实现了一个新的数据库服务用于实时停电数据，而 CMS 仍保留供内容编辑人员使用。
如今，架构中的每一部分均可独立扩展、部署和更新。
- **Next.js** 在 Vercel 上驱动前端，支持服务器端渲染、静态生成和边缘交付。
- **Supabase** 管理实时数据层，通过其 API 存储并提供停电及资产数据。
- **Sitecore** 仍是内容与体验平台，负责编辑工作流和页面内容。
采用无头架构意味着每一层都能按自身需求独立扩展。在 Vercel 上，前端可自动吸收流量高峰，团队无需再为最坏情况的风暴常年预留资源。内容编辑人员继续沿用原有工作流，整个重构过程无需迁移 CMS。
我们之所以迁移到 Vercel，是因为我们需要每一层都能按自己的节奏扩展。风暴不会关心你的部署流程，我们的内容团队也不应该被牵连。拆分技术栈让每个团队都能按所需的速度推进。
Jagan Sampath Kumar，应用团队负责人 @ Endeavor Energy
[链接到标题](https://vercel.com/blog/building-a-real-time-power-outage-map-with-next-js-on-vercel#five-minute-syncs-with-vercel-cron-jobs) 使用 Vercel 定时任务实现五分钟同步
停电地图的价值取决于其数据的新鲜度。在活跃天气事件期间，过时的数据比没有数据更糟糕。
Endeavor 的新数据管道使用 Vercel 定时任务 每五分钟将上游停电系统同步至 Supabase。这些定时任务作为 Vercel Functions 运行，拉取最新的停电状态、受影响区域和预计恢复时间。前端则近乎实时地从 Supabase 读取数据。
在负载下曾长达45分钟的刷新周期，如今即使在风暴高峰期也能准时控制在五分钟内完成。对于在黑暗中查看地图的用户而言，这决定了他们是否能信任所见信息，还是不得不反复刷新、期待更新。
[链接到标题](https://vercel.com/blog/building-a-real-time-power-outage-map-with-next-js-on-vercel#migrating-without-going-dark) 无缝迁移，不停机
对于服务数百万用户的公用事业公司而言，迁移期间停机是不可接受的。团队采用了渐进式迁移：在现有平台旁并行运行一个 Vercel 环境，逐步迁移内容。Endeavour 保留了 Sitecore 后台系统，仅重建前端和数据层，编辑工作流保持不变。
其工程团队与 Vercel 解决方案合作伙伴 Gamma 合作，重建停电地图并迁移到 Vercel。
停电地图被优先处理，因其承载最高流量且影响最大。新组件在上线前已并行构建和测试。预览部署 让从工程到运营的多个团队在发布前即可查看每个构建版本。
Vercel 的预览部署彻底改变了我们与利益相关者的沟通方式。我们不再描述正在构建的内容，而是直接发送链接。过去需要数天才能完成的审批，现在一小时内即可搞定。
Divya Ruhela，解决方案架构师 @ Gamma
分阶段方法使团队能够在真实环境下验证每个组件，同时不影响现有服务。在 Vercel 流水线上，部署速度提升了 40%，每次推送都会自动生成预览环境。
[链接到标题](https://vercel.com/blog/building-a-real-time-power-outage-map-with-next-js-on-vercel#what-comes-next) 未来展望
下一个风暴季已在眼前。届时，停电地图将在高峰流量下实现亚秒级页面加载，并每五分钟从上游系统同步最新数据。
Endeavour 的工程团队重构了整个 Web 应用程序，但对于其 280 万用户而言，变化却极为简单：当他们在黑暗中打开地图时，它将始终在那里。
进入下一个风暴季，我们无需再担忧基础设施问题。我们知道停电地图在 Vercel 上将稳定运行，这让团队可以专注于客户而非平台本身。
Jagan Sampath Kumar，应用团队负责人 @ Endeavor Energy
关于 Endeavour Energy：Endeavour Energy 是澳大利亚最大的电力分销商之一，为西悉尼、蓝山、南部高地及伊拉瓦拉地区超过 280 万居民提供服务。