39.useSSR

在现代 Web 应用开发中，服务器端渲染（SSR）已成为提高首屏加载速度和搜索引擎优化的重要技术。然而，SSR 也带来了一些挑战，特别是在处理仅在浏览器环境中可用的 API 时。useSSR 钩子提供了一种简洁而有效的方式来检测代码运行的环境，使得在 React 组件中处理服务器端和客户端渲染的差异变得简单直观。以下是如何实现和使用这个自定义钩子：

const isDOMavailable = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
);

const useSSR = () => {
  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);

  React.useEffect(() => {
    setInBrowser(isDOMavailable);
    return () => {
      setInBrowser(false);
    };
  }, []);

  const useSSRObject = React.useMemo(
    () => ({
      isBrowser: inBrowser,
      isServer: !inBrowser,
      canUseWorkers: typeof Worker !== 'undefined',
      canUseEventListeners: inBrowser && !!window.addEventListener,
      canUseViewport: inBrowser && !!window.screen
    }),
    [inBrowser]
  );

  return React.useMemo(
    () => Object.assign(Object.values(useSSRObject), useSSRObject),
    [inBrowser]
  );
};

const SSRChecker = props => {
  let { isBrowser, isServer } = useSSR();

  return <p>{isBrowser ? 'Running on browser' : 'Running on server'}</p>;
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <SSRChecker />
);

这个钩子的关键点包括：

1. 使用 isDOMavailable 检查是否在浏览器环境中。

2. 使用 useState 和 useEffect 来处理服务器端和客户端的状态差异。

3. 使用 useMemo 来优化返回对象的创建，避免不必要的重新渲染。

4. 提供了多个有用的环境检测标志，如 isBrowser、isServer、canUseWorkers 等。