对处理“window”、“localStorage”的服务器端渲染做出反应答案

【问题标题】：react sever-side rendering dealing with `window`, `localStorage`对处理“window”、“localStorage”的服务器端渲染做出反应
【发布时间】：2016-10-22 09:34:34
【问题描述】：

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

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

摆脱那些“localStorage 未定义”错误。

还有其他不错的解决方案吗？

编辑我的用例

window 用于其属性，如 innerwitdth，并添加原始浏览器事件，如 resize
localStorage是存储JWT令牌

【问题讨论】：

不使用它或添加另一种检查客户端或服务器的条件，或使用cookie而不是localStorage
同构应用程序通常只使用会话维护状态服务器端。例如，请参阅this。这比有条件地维护客户端状态并在事后尝试在服务器端找出等效的替代方案要简单得多。
试试react-cookie
JSON object vs window variable for passing server-side rendered initial state using reactjs的可能重复
@DiegoHaz react cookie 有 4kb 数据的限制..

标签： javascript reactjs server-side-rendering

【解决方案1】：

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

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

使用现有界面。大多数环境都可以执行相同的基本代码，例如数学运算、处理文本的代码等。但有时编程接口可能会更加困难。例如对于 UI 应用，你可以将数据存储在 HTTP Cookie，浏览器和 NodeJS 都支持。
界面仿真。如果环境不支持编程接口，您必须创建它。例如，对于 NodeJS，您可以要求 JSDOM 在服务器端使用 DOM API。
忽略代码执行。您的应用程序只能在特定环境中运行指定代码。所以你可以排除它。例如，对于带有 SSR 的 UI 应用程序，无需在服务器端运行 GA-widget。

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

【讨论】：