处理`window`,`localStorage`的服务器端渲染

Question

当服务器端呈现使用window或localStorage这些浏览器全局变量的React组件时,我总是需要添加

if (typeof localStorage !== 'undefined') { // then do stuff }

摆脱那些'localStorage is not defined'错误.

还有其他合适的解决方案吗？

编辑我的用例

1. window是为了它的属性innerwitdth,并添加原始的浏览器事件,如resize
2. localStorage 是存储JWT令牌

Answer 1

服务器端渲染意味着您的应用程序是通用的（即同构）。对于通用应用程序，您的代码必须有效并且在所有环境中都不会出现错误。因此，重要的规则是对所有环境使用同一个编程接口。

换句话说，创建通用代码有三种常见方法：

• 使用现有的接口。大多数环境都可以执行同一个基本代码，例如数学运算、处理文本的代码等。但有时编程接口可能会更加困难。例如，对于 UI 应用程序，您可以将数据存储在 中HTTP Cookie，浏览器和 NodeJS 都支持它。

• 接口仿真。如果环境不支持编程接口，则必须创建它。例如，对于 NodeJS，您可以要求 JSDOM 在服务器端使用 DOM API。

• 忽略代码执行。您的应用程序只能在特定环境中运行指定的代码。所以你可以排除它。例如，对于具有 SSR 的 UI 应用程序，无需在服务器端运行 GA-widget。

对于您的情况，只需使用JSDOM（模拟方式）和HTTP Cookie（现有接口方式）