reactjs - Nextjs预取返回 404

Question

我已经构建了一个使用动态路由的 Next.js 应用程序，并且我注意到<Link>预取的一些奇怪行为。

偶尔（通常在重建后但并非总是如此）我的应用程序开始为给定页面上的所有预取返回 404。如果我点击一个链接，下一页会加载，但再次，该页面上的所有预取都从 404 开始。刷新页面几次后，这个问题就会消失，但这并不总是一致的。

中断似乎只发生在我的动态路线上，每秒使用 getStaticProps 和内容重新验证。下面是我如何构建链接的示例，注意tripname将是一个动态值。

<Link href={`/trip/${tripname)}`}>
    <a>
        <Card className={classes.tripCardRoot} />
    </a>
</Link>

这就是页面加载时发生的情况。

编辑：

我花了一天时间对此进行深入研究，并提供了一些额外的细节来更好地描述我正在经历的事情。此错误肯定与我构建应用程序的时间有关，并且仅发生在通过我的函数中的fallback:true属性在构建过程之后生成的页面上。getStaticPaths()

显式构建的页面（例如在路径数组中）似乎没有表现出这个问题。我不确定这是否有意义，但似乎给定页面的前几次加载恢复到以前版本的版本而不是后备页面。只有在重新加载页面几次之后，回退功能才会真正发挥作用，然后将该页面构建为当前构建的一部分。从那时起，一切似乎都按预期工作，直到整个考验开始新的下一个构建。

还包括控制台日志的屏幕截图，指示/_next/data/...目录中存在问题。虽然我不确定这个错误实际上是指什么。

score 0 · Accepted Answer

我遇到了完全相同的问题……经过 2 天的试验/错误，我终于找到了解决方案。但这不是 IMO 的最佳解决方案。

我更新了我的所有<Link />组件next/link并禁用了该prefetch选项。进行此更改后，我的开发工具网络选项卡中不再出现任何 404 错误。对预先生成的 JSON 数据的所有 GET 请求现在只会在悬停时发生，而且神奇的是它们现在不会导致 404...

我知道这不是最好的解决方案，但至少问题已经消失了......希望有人会以更好的解决方案回复！

1 回答 1