Remix 中的默认服务器端值会发生什么情况？

Question

我正在使用以下钩子（取自在ReactJS中获取视口/窗口高度）。我已经调整了该钩子，以便可以在服务器上呈现它（通过在条件内限制对 window 的访问）。

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  if (typeof window !== 'undefined') {
    const { innerWidth: width, innerHeight: height } = window;
    return {
      width,
      height
    };
  }
  return { width: -1, height: -1 }
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

我注意到一些有趣/令人困惑的事情：

1. 当在服务器上呈现时，挂钩确实返回 {width: -1, height: -1} 的默认值
2. 这些值似乎是由父组件观察到的。示例：

export default function FooComponent() {
    const { width, height} = useWindowDimensions();
    // this invariant fails
    invariant(width > -1 && height > -1);

}

但是，如果我在 invariant(...) 行下方插入 console.log(width, height)，我永远不会看到 -1， -1 在浏览器控制台中。

所以看起来 invariant 仅在服务器上触发，而 console.log 仅在客户端上运行。有人能解释一下这是怎么回事吗？即，为什么该组件不遵守默认的服务器端值？

Answer 1

它与 https://github.com/zertosh/invariant 不变吗？

自述文件中的注释指出，如果 process.env.NODE_ENV 不是 Production，即使条件为 true，它也会抛出异常。

对于只渲染客户端的组件，SergioDXA（顶级混音贡献者）提供了一个很酷的包： https://github.com/sergiodxa/remix-utils#clientonly