- 当前位置：首页 >域名 >React Hooks 在 SSR 模式下常见问题及解决方案
React Hooks 在 SSR 模式下常见问题及解决方案
发布时间：2025-11-03 05:43:27 来源：创站工坊 作者：IT科技
服务端渲染(Server-Side Rendering)，式下是问题指由服务侧完成页面的 HTML 结构拼接的页面处理技术。一般用于解决 SEO 问题和首屏加载速度问题。及解决方
由于 SSR 是式下在非浏览器环境执行 JS 代码，所以会出现很多问题。问题本文主要介绍 React Hooks 在 SSR 模式下常见问题及解决方案。及解决方
更多关于 SSR 的式下介绍可以看 UmiJS 的文档《服务端渲染(SSR)[1]》。
问题一：DOM/BOM 缺失
SSR 是问题在 node 环境下运行 React 代码，而此时 window、及解决方document、式下navigator 等全局属性没有。免费源码下载问题如果直接使用了这些属性，及解决方就会报错 window is 式下not defined, document is not defined, navigator is not defined 等。
常见的问题错误用法是在 Hooks 执行过程中，直接使用了 document 等全局属性。及解决方
import React, { useState } from react; export default () => { const [state, setState] = useState(document.visibilityState); return state; }解决方案
1.将访问 DOM/BOM 的方法放在 useEffect/useLayoutEffect 中(服务端不会执行)，避免服务端执行时报错，例如：
import React, { useState, useEffect } from react; export default () => { const [state, setState] = useState(); useEffect(()=>{ setState(document.visibilityState); }, []); return state; }2.通过isBrowser[2]来做环境判断
import React, { useState } from react; function isBrowser() { return !!(typeof window !== undefined && window.document && window.document.createElement); } export default () => { const [state, setState] = useState(isBrowser() && document.visibilityState); return state; }问题二 useLayoutEffect Warning
如果使用了 useLayoutEffect，在 SSR 模式下，会出现以下警告
⚠️ Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderers output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-SSR for common fixes.解决方案
使用 useEffect 代替 useLayoutEffect(废话) 根据环境动态的指定是使用 useEffect 还是 useLayoutEffect。这是来自社区的亿华云计算一种 hack 解决方案，目前在 react-redux[3]、react-use[4]、react-beautiful-dnd[5]均使用的这种方案。 import { useLayoutEffect, useEffect } from react; const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect; export default useIsomorphicLayoutEffect;总结：写 Hooks 时需要注意
1.不要在非 useEffect/useLayoutEffect 中，直接使用 DOM/BOM 属性
2.在非 useEffect/useLayoutEffect 使用 DOM/BOM 属性时，使用 isBrowser 判断是否在浏览器环境执行
3.如果某个 Hooks 需要接收 DOM/BOM 属性，需要支持函数形式传参。以 ahooks 的 useEventListener 举例，必须支持函数形式来指定 target 属性。
import React, { useState } from react; import { useEventListener } from ahooks; export default () => { const [value, setValue] = useState(0); const clickHandler = () => { setValue(value + 1); }; useEventListener( click, clickHandler, { - target: document.getElemenetById(click-btn) + target: () => document.getElemenetById(click-btn) } ); return ( <button id="click-btn" type="button"> You click {value} times </button> ); };4.使用 useIsomorphicLayoutEffect 来代替 useLayoutEffect
参考资料
fix: useDocumentVisiblility support SSR[6]UmiJS 服务端渲染[7]useLayoutEffect and SSR[8]参考资料
[1]服务端渲染(SSR):
https://umijs.org/zh-CN/docs/SSR#服务端渲染(SSR)
[2]isBrowser:
https://github.com/alibaba/hooks/blob/master/packages/hooks/src/utils/canUseDom.ts
[3]react-redux:
https://github.com/reduxjs/react-redux/blob/d16262582b2eeb62c05313fca3eb59dc0b395955/src/components/connectAdvanced.js#L40
[4]react-use:
https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts
[5]react-beautiful-dnd:
https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/use-isomorphic-layout-effect.js
[6]fix: useDocumentVisiblility support SSR:
https://github.com/alibaba/hooks/pull/935/files
[7]UmiJS 服务端渲染:
https://umijs.org/zh-CN/docs/SSR#window-is-not-defined-document-is-not-defined-navigator-is-not-defined
[8]useLayoutEffect and SSR:
https://medium.com/@alexandereardon/uselayouteffect-and-SSR-192986cdcf7a
本文转载自微信公众号「前端技术砖家」，可以通过以下二维码关注。转载本文请联系前端技术砖家公众号。
- 乐视1s手机评价如何？（从用户角度看乐视1s手机的优点和问题）
- GN858（探索GN858的强大功能和出色性能）
- 金泰克内存卡（金泰克内存卡在数据存储领域的革新与应用）
- 华为麦芒5拍照功力如何？（揭秘华为麦芒5拍照实力，你真的了解吗？）
- 探索GA-78LMT-S2主板的性能和功能（一款可靠且功能齐全的主板，满足你的需求）
- 探索iOS9.21在4S上的卓越表现（细节华丽，功能强大，流畅体验不容错过）
- 一键启动PE装系统教程（使用U盘快速安装操作系统，让你的电脑重新焕发生机）
- 电脑重装系统的教程及注意事项（轻松掌握电脑重装系统的步骤，让电脑焕然一新）
- 解决电脑XP系统错误的重装方法（快速恢复电脑XP系统并修复各种错误问题）
- 评析英特尔平板（探索英特尔平板的创新科技与出色性能）
- 如何在平板电脑上实现双开手游？（教程详解及实用技巧）
- 老电脑重装系统教程（以老重装系统，让电脑恢复活力，提高运行效率）
- 探索以确善能镜头的神奇世界（揭秘以确善能镜头的技术革新与潜力）
- 2021年台式电脑摄像头品牌排行榜揭晓（十大品牌竞争激烈，谁能笑到最后？）
- 电脑更新后出现错误，如何解决？（应对电脑更新错误的实用指南）
- LINE通话质量如何？（LINE通话音质、网络环境和通话稳定性综合评估）
- 以朵唯手机L9如何满足用户需求（优秀性能和出色拍照能力的朵唯L9手机）
- 注册苹果笔记本ID的详细流程（一步步教你如何注册苹果笔记本ID）
- 世界最佳杀毒软件是什么？（揭秘最强大的杀毒软件，保护你的计算机安全！）
- CAD布局使用教程（从零基础到高级应用，轻松掌握CAD布局技巧）
随便看看
- Copyright © 2025 Powered by React Hooks 在 SSR 模式下常见问题及解决方案,创站工坊 滇ICP备2023006006号-44sitemap