在next js中使用webpack5进行不必要的页面刷新

Question

当我打开webpack5并在第一次渲染后从页面调用内部接口(/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目录中的模块。通过将React /api 模块使用的所有变量移动到它们自己的文件中，并确保React components或没有导入这些变量，这个错误对我来说似乎已经消失了。

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

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

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

Answer 2

我更新了next.js，因为每当next.js运行时我都会收到控制台警告，告诉我它使用的是weppack4而不是5

你仍然可以通过更改下一次配置来使用webpack 4，因为它是一个更新问题

Answer 3

在客户机页上，我改为通过useEffect()钩子调用内部API来获取数据，而不是通过onclick触发数据获取函数。我发现这个问题已经不存在了。