gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 01:54:36 24 4
gpt4 key购买 nike

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

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

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

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

编辑我的用例

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

最佳答案

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

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

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

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

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

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

关于javascript - react 服务器端渲染处理 `window` , `localStorage`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37934209/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com