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

 

相关文章
|
11天前
|
存储 编解码 缓存
阿里云服务器实例规格选择参考:根据业务场景选择云服务器实例规格
在阿里云服务器的购买过程中,云服务器实例规格是很多用户最难选择的一个选项,因为阿里云有着多达几十种不同的实例规格,为此,阿里云官方在云服务器购买页面新推出了一个场景化选型推荐,用户可通过自己的上云场景结合场景化选型里面的业务场景和细分场景来选择适合自己的阿里云服务器实例规格,在很大程度上解决了新手用户在选择阿里云服务器实例规格上的困局。
阿里云服务器实例规格选择参考:根据业务场景选择云服务器实例规格
|
1天前
|
运维 数据挖掘 开发工具
服务器数据恢复—硬盘离线导致raid5阵列热备盘上线失败的数据恢复案例
服务器磁盘阵列数据恢复环境: 服务器中有两组分别由4块SAS硬盘组建的raid5磁盘阵列,两组raid5阵列划分LUN,组成LVM结构,格式化为EXT3文件系统。 服务器磁盘阵列故障: 服务器中一组raid5阵列中有一块硬盘离线,热备盘自动上线替换离线硬盘。热备盘上线同步数据过程中又有一块硬盘离线,热备盘同步失败,该组raid5阵列崩溃,LVM结构变得不完整,文件系统无法使用。 硬件工程师对两块离线硬盘进行硬件故障检测,发现先离线硬盘无法识别,初步判断该硬盘存在硬件故障,需要进行开盘修复。后离线硬盘可以正常识别。
服务器数据恢复—硬盘离线导致raid5阵列热备盘上线失败的数据恢复案例
|
10天前
|
Cloud Native Java 编译器
将基于x86架构平台的应用迁移到阿里云倚天实例云服务器参考
随着云计算技术的不断发展,云服务商们不断推出高性能、高可用的云服务器实例,以满足企业日益增长的计算需求。阿里云推出的倚天实例,凭借其基于ARM架构的倚天710处理器,提供了卓越的计算能力和能效比,特别适用于云原生、高性能计算等场景。然而,有的用户需要将传统基于x86平台的应用迁移到倚天实例上,本文将介绍如何将基于x86架构平台的应用迁移到阿里云倚天实例的服务器上,帮助开发者和企业用户顺利完成迁移工作,享受更高效、更经济的云服务。
将基于x86架构平台的应用迁移到阿里云倚天实例云服务器参考
|
14天前
|
存储 编解码 网络协议
阿里云服务器通用型g8y实例与通用型g7收费标准与性能区别参考
阿里云服务器通用型g7、通用型g8y实例都是阿里云目前活动中可选的通用型实例规格,它们同属于通用型实例,但是他们之间是有一些区别的。通用型g7属于第七代云服务器,而通用型g8y属于倚天云服务器,是最新一代的云服务器实例。本文为大家介绍一下它们在收费标准及性能方面的一些区别,以供参考。
阿里云服务器通用型g8y实例与通用型g7收费标准与性能区别参考
|
8天前
|
编解码 前端开发 安全
通过阿里云的活动购买云服务器时如何选择实例、带宽、云盘
在我们选购阿里云服务器的过程中,不管是新用户还是老用户通常都是通过阿里云的活动去买了,一是价格更加实惠,二是活动中的云服务器配置比较丰富,足可以满足大部分用户的需求,但是面对琳琅满目的云服务器实例、带宽和云盘选项,如何选择更适合自己,成为许多用户比较关注的问题。本文将介绍如何在阿里云的活动中选择合适的云服务器实例、带宽和云盘,以供参考和选择。
通过阿里云的活动购买云服务器时如何选择实例、带宽、云盘
|
6天前
|
弹性计算 运维 安全
阿里云轻量应用服务器和经济型e实例区别及选择参考
目前在阿里云的活动中,轻量应用服务器2核2G3M带宽价格为82元1年,2核2G3M带宽的经济型e实例云服务器价格99元1年,对于云服务器配置和性能要求不是很高的阿里云用户来说,这两款服务器配置和价格都差不多,阿里云轻量应用服务器和ECS云服务器让用户二选一,很多用户不清楚如何选择,本文来说说轻量应用服务器和经济型e实例的区别及选择参考。
阿里云轻量应用服务器和经济型e实例区别及选择参考
|
7天前
|
机器学习/深度学习 存储 人工智能
阿里云GPU云服务器实例规格gn6v、gn7i、gn6i实例性能及区别和选择参考
阿里云的GPU云服务器产品线在深度学习、科学计算、图形渲染等多个领域展现出强大的计算能力和广泛的应用价值。本文将详细介绍阿里云GPU云服务器中的gn6v、gn7i、gn6i三个实例规格族的性能特点、区别及选择参考,帮助用户根据自身需求选择合适的GPU云服务器实例。
阿里云GPU云服务器实例规格gn6v、gn7i、gn6i实例性能及区别和选择参考
|
15天前
|
存储 机器学习/深度学习 安全
阿里云服务器计算型c8i和通用型g8i实例性能、收费标准和适用场景参考
阿里云不断推出高性能云服务器实例以满足不同用户的需求。其中,计算型c8i与通用型g8i实例凭借卓越的性能和灵活的配置,成为企业级用户的热门选择。计算型c8i和通用型g8i实例采用阿里云全新CIPU架构,可提供稳定的算力输出、更强劲的I/O引擎以及芯片级的安全加固,单台实例最高支持100万IOPS,CPU采用Intel®Xeon®Emerald Rapids或者Intel®Xeon®Sapphire Rapids,主频不低于2.7 GHz,全核睿频3.2GHz。本文将深入探讨这两款实例的性能特点、最新收费标准以及适用场景和活动价格情况,以供大家了解和选择。
阿里云服务器计算型c8i和通用型g8i实例性能、收费标准和适用场景参考
|
10天前
|
SQL 数据挖掘 数据库
服务器数据恢复—意外断电导致XenServer虚拟机不可用的数据恢复案例
服务器数据恢复环境: 一台服务器中有一组由4块STAT硬盘通过RAID卡组建的RAID10阵列,上层是XenServer虚拟化平台,虚拟机安装Windows Server操作系统,作为Web服务器使用。 服务器故障: 因机房异常断电导致服务器中一台VPS(Xen Server虚拟机)不可用,虚拟磁盘文件丢失。
服务器数据恢复—意外断电导致XenServer虚拟机不可用的数据恢复案例
|
18天前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
29 10
React技术栈-react使用的Ajax请求库实战案例

热门文章

最新文章