扣丁书屋

React Hooks 在 SSR 模式下常见问题及解决方案

服务端渲染(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 renderer's 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.

解决方案

  1. 使用 useEffect 代替 useLayoutEffect(废话)
  2. 根据环境动态的指定是使用 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

参考资料

[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


https://mp.weixin.qq.com/s/RuTo4KNv8NoFjEDo4YeZ9g

深入 React 函数组件的 re-render 原理及优化

发布于:1年以前  |  615次阅读  |  详细内容 »

手写系列-实现一个铂金段位的 React

发布于:1年以前  |  484次阅读  |  详细内容 »

如何写出更优雅的 React 组件 - 代码结构篇

发布于:1年以前  |  581次阅读  |  详细内容 »

React 精品组件:mac-scrollbar

发布于:1年以前  |  548次阅读  |  详细内容 »

React 精品组件:mac-scrollbar

发布于:1年以前  |  530次阅读  |  详细内容 »

React 18 Beta 来了

发布于:1年以前  |  630次阅读  |  详细内容 »

手把手教你写一个 React 状态管理库

发布于:1年以前  |  568次阅读  |  详细内容 »

如何将 React 应用程序加载时间减少 70%

发布于:1年以前  |  618次阅读  |  详细内容 »

React 18 新特性之 startTransition

发布于:1年以前  |  586次阅读  |  详细内容 »

Reaction Engines成立新合资公司以打造紧凑、轻质的氨反应器

英国的Reaction Engines公司已经宣布成立一家合资企业以打造紧凑、轻质的氨反应器。这家公司表示,这种反应器可以用于航运和离网能源发电等困难行业的脱碳,并且还可以用于航空。

发布于:1年以前  |  639次阅读  |  详细内容 »

你不知道的 React 最佳实践

发布于:1年以前  |  515次阅读  |  详细内容 »

这才是 React Hooks 性能优化的正确姿势

发布于:1年以前  |  562次阅读  |  详细内容 »

所属标签

最多阅读

Android插件化方案 3年以前  |  235045次阅读
SourceTree,让你忘掉Git命令的工具 3年以前  |  3705次阅读
朴素贝叶斯分类器的应用 3年以前  |  3356次阅读
在Python的Django框架中包装视图函数 3年以前  |  3247次阅读
用Sublime打造Protobuf迷你IDE 3年以前  |  3241次阅读
Python贪吃蛇游戏编写代码 3年以前  |  3224次阅读
在Sublime中高亮显示Proto Buffer 3年以前  |  3222次阅读
Google Shell 风格指南 3年以前  |  3110次阅读
Google Python 风格指南 3年以前  |  3097次阅读
Genymotion下载及安装使用 3年以前  |  3045次阅读
Markdown语法 转义 3年以前  |  2990次阅读
Markdown语法 链接 3年以前  |  2860次阅读
Markdown语法 段落内代码 3年以前  |  2814次阅读
java中NIO与传统IO 3年以前  |  2769次阅读

手机扫码阅读