javascript - react 服务器端渲染处理 `window` , `localStorage`

Question

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

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

摆脱那些“localStorage is not defined”错误。

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

编辑我的用例

1. window 用于它的属性，如 innerwitdth，并添加原始浏览器事件，如 resize
2. localStorage 用于存放JWT token

Answer 1

服务器端渲染意味着您的应用程序是通用的(称为同构)。对于通用应用程序，您的代码必须有效并且可以在所有环境中正常运行。因此，重要的规则是对所有环境使用同一个编程接口(interface)。

换句话说，创建通用代码的常用方法有以下三种:

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

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

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

对于您的情况，只需使用JSDOM(仿真方式)和HTTP Cookie(现有接口(interface)方式)