react实现ssr服务器端渲染总结和案例(实例)

简介: 1、什么是 SSR    SSR 是 server side render 的缩写,从字面上就可以理解    在服务器端渲染,那渲染什么呢,很显然渲染现在框架中的前后端分离所创建的虚拟 DOM 2、为什么要实现服务器端渲染    传统的 SPA 应用 (如 react ),存在不利于优化,首屏加载慢等。

1、什么是 SSR

    SSR 是 server side render 的缩写,从字面上就可以理解

    在服务器端渲染,那渲染什么呢,很显然渲染现在框架中的前后端分离所创建的虚拟 DOM

 

2、为什么要实现服务器端渲染

    传统的 SPA 应用 (如 react ),存在不利于优化,首屏加载慢等。

    服务器端渲染:

    增加首屏加载速度,解决白屏问题

    可以直接渲染页面,利于 SEO 优化

    

3、SSR 的实现

    1. 创建 webpack 配置文件

 

    webpack.config.dev        即开发环境的配置

    webpack.config.prod        即生成环境的配置

 

    webpack.config.node        服务器端的配置文件

 

 

 

    配置文件基本配置完成

 

    2、修改 pakage.json 文件

    我们需要修改 package.json 文件

 

 

    3、dev/prop 入口文件

 

    4、node 服务端

    Node webpack 中的打包代码即是 App 该组件。

    

    查看 ssr 服务器

 

    服务器代码实现

 

 

    主要实现技术:

    这里主要是用了 react 提供的 renderToString 方法

    renderToString  主要是接收一个 react 组件,并且返回一段 html 结构字符串。

    

    readerToString 与 renderToStaticMakeUp 

   他们的作用相同

 

   区别在于:

    renderToString 渲染的时候带有 data-reactId ,这样就会增加流量,不过在客户端对比就会重新渲染

    renderToStaticMarkUp 渲染的时候不带 data-reactId ,节省流量,在客户端会重新刷新,出现闪屏

 

想了解更多知识(源码等),想知道更多精华,看看我的博客吧   https://gilea.cn/

 

 https://www.cnblogs.com/jiebba

 

相关文章
|
2天前
|
前端开发 JavaScript 搜索推荐
一文 Next / React / SSR / SSG / CSR 扫盲
一文 Next / React / SSR / SSG / CSR 扫盲
|
1月前
|
存储 Oracle 关系型数据库
服务器数据恢复—EVA存储硬盘读写性能不稳定掉线的数据恢复案例
服务器存储数据恢复环境: 一台EVA某型号控制器+EVA扩展柜+FC磁盘。 服务器存储故障&检测: 磁盘故障导致该EVA存储中LUN不可用,导致上层应用无法正常使用。
97 47
|
9天前
|
安全 数据挖掘
服务器数据恢复—RAID5阵列中两块硬盘离线导致阵列崩溃的数据恢复案例
服务器数据恢复环境: 两组分别由4块SAS接口硬盘组建的raid5阵列,两组raid5阵列划分LUN并由LVM管理,格式化为EXT3文件系统。 服务器故障: RAID5阵列中一块硬盘未知原因离线,热备盘自动激活上线替换离线硬盘。在热备盘上线过程中,raid5阵列中又有一块硬盘离线。热备盘同步失败,该raid阵列崩溃,LVM结构变得不完整,文件系统无法正常使用。
|
15天前
|
存储 监控 调度
云服务器成本优化深度解析与实战案例
本文深入探讨了云服务器成本优化的策略与实践,涵盖基本原则、具体策略及案例分析。基本原则包括以实际需求为导向、动态调整资源、成本控制为核心。具体策略涉及选择合适计费模式、优化资源配置、存储与网络配置、实施资源监控与审计、应用性能优化、利用优惠政策及考虑多云策略。文章还通过电商、制造企业和初创团队的实际案例,展示了云服务器成本优化的有效性,最后展望了未来的发展趋势,包括智能化优化、多云管理和绿色节能。
|
17天前
|
存储 运维 数据挖掘
服务器数据恢复—EVA存储中多块硬盘离线导致存储崩溃的数据恢复案例
一台HP EVA存储中有23块硬盘,挂接到一台windows server操作系统的服务器。 EVA存储上有三个硬盘指示灯亮黄灯,此刻存储还能正常使用。管理员在更换硬盘的过程中,又出现一块硬盘对应的指示灯亮黄灯,存储崩溃,无法使用了。
|
1月前
|
数据挖掘 Linux 数据库
服务器数据恢复—reiserfs文件系统数据恢复案例
服务器数据恢复环境: 一台服务器中有一组由4块SAS硬盘组建的RAID5阵列,上层安装linux操作系统统。分区结构:boot分区+LVM卷+swap分区(按照顺序),LVM卷中划分了一个reiserfs文件系统作为根分区。 服务器故障: 服务器操作系统在运行过程中由于未知原因崩溃,管理员重装操作系统后发现分区结构变为:boot分区+swap分区+LVM卷(按照顺序),LVM卷中文件系统位置有个空的reiserfs超级块。 用户方需要恢复reiserfs文件系统中所有数据,包含数据库、网站程序与网页、OA系统中所有办公文档。
服务器数据恢复—reiserfs文件系统数据恢复案例
|
18天前
|
数据挖掘 Linux Windows
服务器数据恢复—服务器raid0数据恢复及数据迁移的案例
某品牌服务器上有一组由两块SAS硬盘组建的raid0阵列,上层是windows server操作系统+ntfs文件系统。服务器上一个硬盘指示灯显示黄颜色,该指示灯对应的硬盘离线,raid不可用。
|
1天前
|
存储 数据挖掘
服务器数据恢复—ZFS文件系统下数据恢复案例
服务器存储数据恢复环境: ZFS Storage 7320存储阵列中有32块硬盘。32块硬盘分为4组,每组8块硬盘,共组建了3组RAIDZ,每组raid都配置了热备盘。 服务器存储故障: 服务器存储运行过程中突然崩溃,排除人为误操作、断电、进水和其他机房不稳定因素。管理员重启服务器存储,系统无法进入,需要恢复服务器存储中的数据。
|
1月前
|
数据采集 前端开发 搜索推荐
|
1月前
|
存储 Oracle 关系型数据库
服务器数据恢复—DS5300存储raid5阵列数据恢复案例
服务器存储数据恢复环境: 某单位一台某品牌型号为DS5300的服务器存储,1个机头+4个扩展柜,底层是2组分别由数十块硬盘组建的RAID5阵列。存储系统上层一共分了11个卷。 服务器存储故障&分析: 存储设备上一组raid5阵列上的2块磁盘出现故障,对应的硬盘指示灯亮黄灯,阵列崩溃,存储不可用。该组故障阵列上层存放的是Oracle数据库文件。
下一篇
DataWorks