javascript - 如何检测您的 React 应用程序是否已在服务器上渲染？

Question

我想在组件中确定我的 React 应用程序是否正在构建以与校验和进行比较或正常渲染。有没有办法让组件在初始“校验和”渲染上的行为略有不同？

具体来说，我有一个使用 Canvas 的组件，而服务器无法做到这一点。因此，在服务器上，我希望它只渲染一个空元素，然后在客户端上匹配校验和并随后更新。

或者在这种情况下，让 React 用新元素替换服务器渲染的元素是否更好？

Answer 1

为了检查环境，我使用了一个简单的辅助函数:

isBrowser = () => typeof window !== 'undefined' && window.document !== undefined;

这是有效的，因为 window 和 window.document 是特定于浏览器的对象。使用此帮助程序，您可以获得特定于浏览器/服务器的行为。