15

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

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

摆脱那些“未定义本地存储”错误。

有没有其他体面的解决方案？

编辑我的用例

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

1 回答 1

2

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

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

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

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

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

对于您的情况，只需使用JSDOM(emulation way) 和HTTP Cookie(existing interface way)

于 2019-02-20T21:23:57.850 回答