Vercel/Next.js (seeminlgy) 随机返回 404 和 {"notFound": True}

Fab*_*ler 9 reactjs webpack next.js vercel

介绍

很抱歉无法提供可重现的示例。我们的团队无法可靠地重现该错误。我们已经调查该错误近一周了,但似乎没有取得任何进展。我们刚刚推出了next.js基于无头的 Shopify 商店(即使用 next.js 作为前端,使用 Shopify 处理从结帐开始的所有内容)。

这个错误是迄今为止我所见过的最奇怪的事情next.js,任何解决该问题的指示都值得赞赏。

笔记:

您可以导航到www.everdrop.ch/it并打开控制台以查看一些损坏的链接。然而,由于这是生产,我们显然会尽力尽快修复它们。

问题:

几乎每次我们部署新版本时,我们都会在控制台中看到一些看似随机的 404,因为下次尝试预取 Links时。

404 的形式始终为https://domain/_next/data/<DEPLOYMENT>/<PATH>/slug.json有时PATH为eg category-pages,有时为空。

观察1

当单击控制台中的损坏链接之一时(.json,我会得到一个404

导航到客户端的损坏页面也会给出 404

然而,当curl -I -L我得到一个200

观察2

检查 Vercel 中的输出数据时
一切都像魅力一样

请注意,URL 不同。这是相同的部署,但 URL 不同。

观察3

受影响的链接似乎是随机的。然而,有些人似乎比其他人更容易受到影响。

观察4

导航到该页面然后刷新或直接访问该页面确实会生成正确呈现的页面。令人惊讶的是,这也导致(对于大多数页面而言)初始错误消失。

观察5

在 vercel 上重新运行部署通常可以解决问题,并且许多损坏的链接将随机工作。有时这会导致其他损坏的链接。

背景和堆栈

我们使用StoryblokShopify作为数据提供者在构建期间进行查询。Shopify 用于产品数据,Storyblok 用于页面和内容数据。到目前为止,所有受影响的页面都是我们在构建期间从 Storyblok 提取数据的页面(这些页面是除搜索和产品页面之外的所有页面)。

我们用于next i18next多语言本地化。我们使用ENV变量来控制数据的来源来构建不同的商店。

Fab*_*ler 0

许多人在 LinkedIn 上联系我,询问我们最终如何解决手头的问题。

我认为,一般来说,问题发生在构建时,页面构建失败(即当您遇到 API 限制时)。与以下组合结合时,这尤其成问题

fallback: truehttps://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-true

我认为,已构建但失败的页面以后将不会更新。

我们的解决方案

对于我们来说,我们能够通过以下方式解决它: