next.js - 在下一个 js 中使用 webpack5 刷新不需要的页面

Question

当我打开 webpack5 并在第一次渲染后从页面调用内部 api(/api/*) 时，页面刷新并记录由于服务器端更改而刷新的页面数据。刷新一次后，它可以像 webpack4 一样正常工作。

预期行为首次呈现后，页面不应在 api 调用时刷新。

Answer 1

我最近更新到 Next JS 12，突然也开始遇到这个问题。我不确定它是否必然与此相关，因为我相信 Next JS 11 也将​​ Webpack 5 用于 HMR，但他们肯定切换到套接字通信以进行热重载，而不是像以前版本那样使用服务器发送事件。 [https://nextjs.org/docs/upgrading#nextjs-hmr-connection-now-uses-a-websocket]

我有一个文件 /inc/paths.js，我在其中组织和导出应用程序中不同资源的 URI 路径字符串变量。该模块中有许多路径也被我的部分 /api 脚本使用，即 AWS S3 存储桶路径的对象键。因此，这个模块不仅被 /pages 目录和其他地方的 React 组件导入，而且被 /api 目录中的模块导入。 通过将 /api 模块使用的所有变量移动到它们自己的文件中，并确保这些变量都没有被 React 组件或页面导入，错误似乎是对我来说消失了。

这可能与 Vercel 的这句话有关:

Finally, if you edit a file that's imported by files outside of theReact tree, Fast Refresh will fall back to doing a full reload. Youmight have a file which renders a React component but also exports avalue that is imported by a non-React component. For example, maybeyour component also exports a constant, and a non-React utility fileimports it. In that case, consider migrating the constant to aseparate file and importing it into both files. This will re-enableFast Refresh to work. Other cases can usually be solved in a similarway.https://nextjs.org/docs/basic-features/fast-refresh

虽然逻辑并不完全匹配，但它让我相信沿着这些思路发生了一些事情。