React服务器端渲染处理`window`、`localStorage`

Question

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

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

如何消除那些“localStorage未定义”错误？

还有其他好的解决方案吗？

编辑我的用例

1. window是用来获取它的属性，如innerwitdth，以及添加原始浏览器事件，如resize
2. localStorage用于存储JWT令牌

- xiaofan2406

---

请不要使用它或添加其他类型的条件来检查客户端或服务器，也不要使用cookie代替localStorage。 - YOU

同构应用通常只使用会话服务器端来维护状态，例如可参考此处。这比在客户端有条件地维护状态并试图在事后找到一个等效的服务器端替代方案要简单得多。 - Patrick Roberts

尝试使用 react-cookie。 - Diego Haz

可能是JSON对象与窗口变量的重复问题，用于使用Reactjs传递服务器端呈现的初始状态。 - Paul Sweatte

@DiegoHaz，React Cookie 有 4KB 数据限制。 - Ritesh

Answer 1

服务器端渲染意味着您的应用程序是通用的（也被称为同构）。对于通用应用程序，您的代码必须在所有环境中有效且无误地工作。因此，重要规则是在所有环境中使用一个编程接口。

换句话说，有三种常见的创建通用代码的方式:

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

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

3. 忽略代码执行。您的应用程序只能在特定环境中运行指定的代码。因此，您可以将其排除在外。例如，对于具有SSR的UI应用程序，没有必要在服务器端运行GA小部件。

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

- ufocoder