在React结合服务端框架时，为何要检查typeof window？

虽然useEffect确实只会在客户端执行，但在这类服务端渲染（SSR）或静态站点生成（SSG）框架中，添加typeof window检查主要有以下几个实际作用：

• 避免服务端编译/解析时报错：
  很多SSR框架在服务端编译组件代码时，会扫描全局变量的引用。如果你的useEffect回调里直接调用window相关API（比如window.addEventListener），哪怕这段代码不会在服务端执行，部分工具链可能会因为检测到服务端不存在的window变量而抛出编译错误。用typeof window !== "undefined"做检查，相当于给编译器明确的类型提示：这段代码仅在客户端环境运行，从而跳过服务端的错误检测。

• 兼容特殊渲染场景：
  比如使用增量静态再生（ISR）或服务端增量渲染时，组件代码可能会在服务端被重新执行。虽然useEffect回调不会在服务端运行，但组件顶层的isBrowser变量在服务端会被赋值为false，客户端则为true。把检查放在useEffect里，能确保回调逻辑只在客户端触发，避免特殊场景下的逻辑异常。

• 提升代码健壮性与复用性：
  如果组件需要在纯客户端应用和SSR应用之间复用，这个检查能让组件无需修改即可适配不同环境。另外，养成这个检查的习惯，能避免因疏忽直接使用浏览器API而导致的服务端报错。

补充说明 #

你的示例代码里把isBrowser加入useEffect的依赖数组其实没必要——isBrowser在客户端渲染完成后就不会再变化，依赖数组可以改成空数组[]，避免不必要的重复执行。

内容的提问来源于stack exchange，提问作者Epple