我的足球应用在比赛日开始前运行得非常完美

起初，开发一款足球应用似乎很简单。

我计划获取比赛信息、显示球队、显示比分，并每隔几秒刷新一次。在测试期间，它运行良好。我使用了两个标签页和一些示例比赛，一切看起来都很正常。

接着，第一个繁忙的比赛日到来了。

数百名用户同时打开了应用。请求发生了重叠。有些比分看起来在倒退。应用为每一位访问者都单独获取了相同的数据。

我意识到，一个上线运行的应用不仅仅是一个连接到 API 的网站，它更是一个数据同步系统。

以下是我犯过的错误以及我是如何修复它们的：

  • 避免仅在客户端进行轮询 我的第一个版本中，每个浏览器每五秒都会请求一次数据。 1 个用户 = 每分钟 12 次请求。 1,000 个用户 = 每分钟 12,000 次请求。 大多数请求都在索取完全相同的数据。

  • 使用服务端请求 我将 API 调用移到了服务端。这让你能够控制： • API 凭据 • 缓存 • 速率限制 • 错误处理 • 响应格式化

永远不要在客户端代码中使用密钥。如果有人窃取了你的密钥，这既不安全又昂贵。

  • 创建一个映射层 我不再将原始 API 数据直接传递给组件。如果供应商更改了字段名称，我的 UI 就会崩溃。现在，我会先将供应商的数据映射到我自己的内部格式中。这保证了 UI 的稳定性。

  • 使用 Server Components 提升速度 我不再显示加载界面，而是在服务端加载初始比赛数据。用户可以立即看到内容。

  • 实现智能轮询 如果没有正在进行的比赛，应用就不应该刷新。我添加了一个检查机制，在比赛结束时停止轮询。这节省了大量的服务器资源。

  • 修复竞态条件 有时请求 B 会在请求 A 之前返回。这会导致比分看起来在倒退。我使用 AbortController 在启动新请求之前取消旧请求。

  • 优雅地处理错误 如果刷新失败，不要显示空白屏幕。保留最后一次成功获取的数据。显示一个 15 秒前的比分也比完全没有比分要好。

Demo 只需要展示数据。而真正的产品必须管理缓存、安全性和状态。

你开发过上线运行的应用吗？当真实用户涌入时，出现了什么问题？

来源：https://dev.to/mihailove123/my-football-app-worked-perfectly-until-matchday-started-3i59