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

Question

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

预期行为 首次渲染后，页面不应在 api 调用上刷新。

标签： node.jsreactjsapinext.js

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 components 或 pages 没有导入这些变量，错误对我来说似乎已经消失了。

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

最后，如果您编辑由 React 树之外的文件导入的文件，Fast Refresh 将回退到完全重新加载。你可能有一个文件，它渲染了一个 React 组件，但也导出了一个由非 React 组件导入的值。例如，也许你的组件也导出了一个常量，而一个非 React 实用程序文件导入了它。在这种情况下，请考虑将常量迁移到单独的文件并将其导入到这两个文件中。这将重新启用快速刷新工作。其他情况通常可以用类似的方式解决。 https://nextjs.org/docs/basic-features/fast-refresh

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