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

 

相关文章
|
4月前
|
存储 运维 数据挖掘
服务器数据恢复—EqualLogic存储硬盘出现坏道的数据恢复案例
某品牌EqualLogic PS6100存储阵列上有一组由16块硬盘组建的raid5磁盘阵列。磁盘阵列上层划分多个大小不同的卷,存放虚拟机文件。 硬盘出现故障导致存储阵列不可用,需要恢复存储阵列中的数据。
|
4月前
|
存储 运维 Oracle
服务器数据恢复—存储硬盘指示灯亮黄灯,RAID5阵列崩溃的数据恢复案例
服务器存储数据恢复环境: 某单位一台某品牌DS5300存储,1个机头+4个扩展柜,50块的硬盘组建了两组RAID5阵列。一组raid5阵列有27块硬盘,存放Oracle数据库文件。存储系统上层一共划分了11个卷。 服务器存储故障: 存储设备上两个硬盘指示灯亮黄色。其中一组RAID5阵列崩溃,存储不可用,设备已经过保。
|
7月前
|
存储 Oracle 关系型数据库
服务器数据恢复—光纤存储上oracle数据库数据恢复案例
一台光纤服务器存储上有16块FC硬盘,上层部署了Oracle数据库。服务器存储前面板2个硬盘指示灯显示异常,存储映射到linux操作系统上的卷挂载不上,业务中断。 通过storage manager查看存储状态,发现逻辑卷状态失败。再查看物理磁盘状态,发现其中一块盘报告“警告”,硬盘指示灯显示异常的2块盘报告“失败”。 将当前存储的完整日志状态备份下来,解析备份出来的存储日志并获得了关于逻辑卷结构的部分信息。
|
9月前
|
存储 数据挖掘
服务器数据恢复—EMC存储raid5阵列数据恢复案例
服务器存储数据恢复环境: EMC某型号存储中有一组由8块硬盘组建的raid5磁盘阵列。 服务器存储故障: raid5阵列中有2块硬盘离线,存储不可用,上层应用崩了。
|
9月前
|
数据挖掘 Linux
服务器数据恢复—服务器重装系统导致分区改变的数据恢复案例
服务器上有一组由raid卡组建的raid5磁盘阵列。上层安装linux才做系统,采用XFS文件系统,划分了3个分区。 管理员将服务器的操作系统重装后,发现服务器上的分区发生了改变:一个分区消失,其他分区不可访问。
|
8月前
|
数据挖掘
服务器数据恢复——服务器异常断电造成raid5阵列故障的数据恢复案例
某服务器上有一组由12块硬盘组建的raid5磁盘阵列。 机房供电不稳定导致机房中该服务器非正常断电,重启服务器后管理员发现服务器无法正常使用。 意外断电可能会导致服务器上的raid模块损坏。
|
5月前
|
Unix 应用服务中间件 索引
服务器数据恢复—LUN映射出错导致文件系统共享冲突的数据恢复案例
SUN光纤存储系统中有一组由6个硬盘组建的RAID6,划分为若干LUN,MAP到跑不同业务的服务器上,这些服务器上运行的是SOLARIS操作系统。 服务器不存在物理故障。由于公司业务变化,需要增加一台服务器跑新的应用。服务器管理员在原服务器在线的状态下,将其中一个lun映射到一台新服务器上。实际上,这个刚映射过去的卷已经map到了solaris生产系统上的某个lun上了。映射到新服务器后,服务器对这个卷进行初始化的操作,原solaris系统上的磁盘报错,重启服务器后这个卷已经无法挂载。 服务器管理员寻求sun原厂工程师的帮助。sun工程师检测后执行了fsck操作。执行完成后文件系统挂载成功。查
|
5月前
|
存储 数据挖掘 Linux
服务器数据恢复—重装系统导致OceanStor存储上的分区无法访问的数据恢复案例
服务器存储数据恢复环境: 华为OceanStor某型号存储+扩展盘柜,存储中的硬盘组建了raid5磁盘阵列,上层分配了1个lun。 linux操作系统,划分了两个分区,分区一通过lvm扩容,分区二为xfs文件系统。 服务器存储故障: 工作人员重装系统操作失误导致磁盘分区变化,分区二无法访问,数据丢失。
|
6月前
|
存储 算法 数据挖掘
服务器数据恢复—昆腾存储StorNext文件系统数据恢复案例
一台昆腾存储设备中有一组raid5磁盘阵列。阵列上有两块硬盘先后离线,raid5磁盘阵列不可用。
|
5月前
|
存储 数据挖掘 Windows
服务器数据恢复—RAIDZ上层ZFS文件系统数据恢复案例
一台服务器有32块硬盘,采用Windows操作系统。 服务器在正常运行的时候突然变得不可用。没有异常断电、进水、异常操作、机房不稳定等外部因素。服务器管理员重启服务器,但是服务器无法进入系统。管理员联系北亚企安数据恢复工程师要求恢复服务器数据。