react 服务器端渲染 ssr 中 localstorage/history/window is not defined 解决方案

简介: 1、原因      ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期     也就是说 ssr 阶段是不会执行 componentDidMount 方法的    当你在 componentWillMount 之前当生命周期里面调用 window / localstorage 全局对象的时候,  它其实是在服务器上面执行等,因为 window / localstorage 是浏览器的属性对象。

 

1、原因

  

  ssr 会在后端执行组件的 componentWillMount 以及在它这个生命周期之前的生命周期

    也就是说 ssr 阶段是不会执行 componentDidMount 方法的

 

 当你在 componentWillMount 之前当生命周期里面调用 window / localstorage 全局对象的时候,

 它其实是在服务器上面执行等,因为 window / localstorage 是浏览器的属性对象。

 所以在 服务器端 跑的时候,就会出现没有定义的错误。

 

2、解决方案

  

  个人觉得可以把这些浏览器的属性重新封装以便使用。

  例如:

   let targetWin = null
    if(window) targetWin = window
    var proxyWindow = new Proxy(targetWin,{
        get: function (target, key, receiver) {
            if(!targetWin) {
                return Reflect.get({nothing:function () {}}, 'nothing', receiver);
            }
            return Reflect.get(target, key, receiver);
        }
    });

    export default proxyWindow

  

  没有在项目中试过,不过我觉得这是一个完美解决方案。

  上面是用了 es6 的 proxy 做代理。

  当 window 不存在时候,如果调用了 window 上面的方法或者属性就会执行 nothing 这个方法。

  也就是说 在服务器渲染的时候 不会找不到 window ,而会执行 nothing 方法。

  这样就不会报错了。

  这里的话,以后使用 window 的对象的话,就需要引用这个模块。

 

  以此类推,localstorage / location 等都可以用此类方法实现了。

 

相关文章
|
1月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
1月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
26 1
|
1月前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求,合理运用相关特性和策略,不断进行优化和调整,以达到最佳的性能提升效果。同时,要密切关注 React 的发展和更新,以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法,让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
105 59
|
14天前
|
数据采集 JavaScript 搜索推荐
服务器端渲染(SSR)(Nuxt+Next.js)
服务器端渲染(SSR)技术在服务器上生成页面HTML,提升首屏加载速度和SEO效果。Nuxt.js和Next.js分别是基于Vue.js和React.js的流行SSR框架。Nuxt.js提供自动化路由管理、页面级数据获取和布局系统,支持SSR和静态站点生成。Next.js支持SSR、静态生成和文件系统路由,通过`getServerSideProps`和`getStaticProps`实现数据获取。SSR的优点包括首屏加载快、SEO友好和适合复杂页面,但也会增加服务器压力、开发限制和调试难度。选择框架时,可根据项目需求和技术栈决定使用Nuxt.js或Next.js。
|
28天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
52 6
|
1月前
|
前端开发 JavaScript
React 条件渲染
10月更文挑战第9天
29 0
|
3月前
|
前端开发 安全 开发者
JSF文件上传,让Web应用如虎添翼!一招实现文件上传,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,文件上传是重要功能之一。JSF(JavaServer Faces)框架提供了强大的文件上传支持,简化了开发流程。本文将介绍JSF文件上传的基本步骤:创建前端表单、处理上传文件的后端Action类、将文件保存到服务器指定目录以及返回结果页面。通过示例代码,我们将展示如何利用JSF实现文件上传功能,包括使用`h:inputFile`控件和`ManagedBean`处理上传逻辑。此外,JSF文件上传还具备类型安全、解耦合和灵活性等优点,有助于提升程序的健壮性和可维护性。
39 0
|
Web App开发 存储 JavaScript
基于React+Redux的SSR实现
今天我们将构建一个使用Redux的简单的React应用程序,实现服务端渲染(SSR)。该示例包括异步数据抓取,这使得任务变得更有趣。
2514 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
362 0