处理`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应用程序，您可以将数据存储在def change_generator(generator, n): def even_gen(): n = 2 while True: if n % 2 == 0: yield n else: yield n += 1 global g # directly change the g referenced in main code if not g.__name__ == 'even_gen': # change g if it is not even_gen g = even_gen() # output: # 1 # 2 # None # 4 # None 中，Browser和NodeJS都支持。

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

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

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