Javascript react服务器端渲染处理'window'，'localStorage`

当服务器端呈现使用

window

或

localStorage

这些浏览器全局变量的React组件时，我始终需要添加

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

要消除这些“localStorage未定义”错误

还有其他合适的解决办法吗

编辑我的用例

窗口

用于其属性，如

innerWidth

，以及添加原始浏览器事件，如

调整大小

localStorage

用于存储JWT令牌

---

服务器端呈现意味着您的应用程序是通用的（称为同构）。对于通用应用程序，您的代码必须有效，并且在所有环境中都能正常工作。因此重要的规则是对所有环境使用一个相同的编程接口

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

• 使用现有界面。大多数环境可以执行一个相同的基本代码，如数学运算、处理文本的代码等。但有时编程接口可能会更困难。例如，对于UI应用程序，您可以将数据存储在

  HTTPcookie

  中，浏览器和NodeJ都支持它

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

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

---

对于您的情况，只需使用

JSDOM

（仿真方式）和

httpcookie

（现有接口方式）

，不使用它或添加另一种检查客户端或服务器的条件，或者使用Cookie而不是localStorageIsomorphic应用程序通常只使用会话维护服务器端的状态。例如，见。这比有条件地在客户端维护状态并在服务器端尝试找出等效的替代方案要简单得多。尝试@DiegoHaz react cookie的可能副本具有4kb数据的限制。。