在开发 Web 应用程序的过程中，热更新已经成为了一种很常见的场景。它允许开发人员在修改代码后无需手动刷新页面，就能够在实时的沙盒中查看更改效果。Next.js 作为一款支持 SSR（服务器渲染）的 React 框架，在提供热更新功能时是非常流畅的。但在使用过程中，很多人可能会发现修改代码后，浏览器依然没有刷新，这就不好啦。本文将详细讲解该问题的解决方案。
问题描述
问题场景：当我们在开发 Next.js 应用时，对某个组件或页面进行了修改，并保存了更改后的代码。Next.js 默认会自动检测修改，并触发热更新，但浏览器却没有刷新，需要手动刷新才能查看更改效果。这使得开发者的工作流程变得迟钝，增加了不必要的操作。
调查分析
在尝试解决该问题之前，我们需要先对问题进行调查分析。我们可以在 Next.js 的官方文档中寻找解决方案。在 HMR on the client-side 章节中，我们可以找到这样一句话：
“请注意，HMR（热模块替换）应该很好地与 Webpack Dev Server 配合使用，该服务将在浏览器中自动触发模块更改。Next.js 不提供此功能。”
这就是说，Next.js 提供的热更新功能不能自动触发浏览器的刷新操作，并且需要配合 Webpack Dev Server 才能实现该功能。
解决方案
由于 Next.js 提供的热更新不能自动触发浏览器的刷新操作，我们需要手动开启该功能。具体来说，我们需要在组件或页面中添加 webSocketUrl 选项，用于连接 WebSocket 服务。WebSocket 服务是 Next.js 默认启用的，通过连接该服务实现热更新功能。
在配置 webSocketUrl 时，需要传入正确的地址。其中，location.host 可以获取当前页面的本地地址，__webpack_dev_server_client__ 是 Webpack Dev Server 默认的 WebSocket 地址。
-- --------------------- --- -------------- -
--------------------
----- ------------ - --- ----
--------------------------------
---------------------------------- - --------
--
--------------------- - ----------------- --- ------ - ----- - -----
--------------------- - ----------------- - ----
-上述代码可以直接放在组件或页面的 .js 文件中。具体来说，代码中通过 process.env.NODE_ENV 判断是否处于开发环境，如果是开发环境，则开启热更新。然后，使用 URL 构造函数创建 WebSocket 地址，将地址协议设置为 wss 或 ws，并将构造函数返回的地址设置为 __webpack_require__.l。
示例代码
------ ----- ---- --------
----- ----- - -- -- -
-- --------------------- --- -------------- -
--------------------
----- ------------ - --- ----
--------------------------------
---------------------------------- - --------
--
--------------------- - ----------------- --- ------ - ----- - -----
--------------------- - ----------------- - ----
-
------ -
-----
--------- -----------
------
--
--
------ ------- ------总结
通过本文学习，我们了解了 Next.js 在提供热更新时不能自动触发浏览器的刷新操作，并通过调查分析找到了解决方案。对于每一个代码修改操作，我们需要手动刷新浏览器才能够查看更改效果。我们在 Next.js 应用中添加 webSocketUrl，用于连接 WebSocket 服务，从而实现自动触发浏览器的刷新操作。最后，我们还演示了在组件或页面 .js 文件中如何加入热更新代码，供读者借鉴。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c4d8d883d39b488183d549