当一次简单的刷新搞垮了我们的应用
我们发现了一个 bug。 顶级路由运行正常。 深层路由导致了全页刷新。 侧边栏每次都会重置。 应用感觉很不稳定。
本地运行正常。 在生产环境中失败了。
我们在 Azure Static Web Apps 上使用了 Next.js 静态导出。 这种配置没有服务器运行时。 它只提供静态文件。
问题出在软导航（soft navigation）上。 Next.js 需要路由负载数据（route payload data）来实现平滑过渡。 首次加载时需要 HTML。
我们的 Azure 重写规则（rewrite rules）范围太广了。 当 Next.js 请求负载数据时，Azure 发送了 HTML。 路由失败。 应用重新加载。
我们通过自动化解决了这个问题。 我们构建了一个工具，根据构建输出生成重写规则。 该工具现在可以：
- 扫描动态路由文件。
- 为 HTML 和负载数据创建特定规则。
- 按优先级对规则进行排序。
- 写入最终的配置文件。
这消除了手动操作带来的错误。
如果你在 Azure 上使用静态导出：
- 自动化你的配置文件。
- 测试软导航。
- 检查负载请求是否返回了 HTML。
- 将重写规则视为关键基础设施。
棘手的工程前端 bug 往往隐藏在构建输出与托管规则之间。