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

 

相关文章
|
12天前
|
弹性计算 监控 负载均衡
|
7天前
|
数据采集 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。
|
9天前
|
存储 缓存 安全
阿里云服务器内存型r7、r8a、r8y、r8i实例区别及选择参考
随着阿里云2024年金秋云创季的开始,目前在阿里云的活动中,属于内存型实例规格的云服务器有内存型r7、内存型r8a、内存型r8y和内存型r8i这几个实例规格,相比于活动内的经济型e和通用算力型u1等实例规格来说,这些实例规格等性能更强,虽然这几个实例规格的云服务器通常处理器与内存的配比为都是1:8,但是他们在处理器、存储、网络、安全等方面等性能并不是一样的,所以他们的适用场景也有着不同。本文为大家介绍内存型r7、r8a、r8y、r8i实例的性能、适用场景的区别以及选择参考。
|
12天前
|
机器学习/深度学习 弹性计算 编解码
阿里云服务器c7/c8a/c8y/c8i/g7/g8a/g8y/g8i/r7/r8a/r8y/r8i实例区别及选择参考
在阿里云目前的活动中,除了特价的轻量应用服务器和经济型e及通用算力型u1实例之外,属于计算型实例的实例有计算型c7/c8a/c8y/c8i,属于通用型实例的有通用型g7/g8a/g8y/g8i,属于内存型实例的有内存型r7/r8a/r8y/r8i。本文将详细介绍阿里云服务器中的c7、c8a、c8y、c8i、g7、g8a、g8y、g8i、r7、r8a、r8y、r8i等实例规格的性能、适用场景及选择参考,帮助用户更好地选择合适的云服务器实例。
|
15天前
|
存储 机器学习/深度学习 编解码
阿里云服务器计算型c7、c8a、c8y、c8i实例性能、适用场景区别及选择参考
随着阿里云2024年金秋云创季的开始,目前在阿里云的活动中,属于计算型实例规格的云服务器有计算型c7、计算型c8a、计算型c8y和计算型c8i这几个实例规格,相比于活动内的经济型e和通用算力型u1等实例规格来说,这些实例规格等性能更强,虽然这几个实例规格的云服务器通常处理器与内存的配比为都是1:2,但是他们在处理器、存储、网络、安全等方面等性能并不是一样的,所以他们的适用场景也有着不同。本文为大家介绍计算型c7、c8a、c8y、c8i实例的性能、适用场景的区别以及选择参考。
|
14天前
|
存储 人工智能 安全
阿里云服务器通用型g7、g8a、g8y、g8i实例区别及选择指南
目前在阿里云的活动中,属于通用型实例规格的云服务器有通用型g7、通用型g8a、通用型g8y和通用型g8i这几个实例规格,相比于活动内的经济型e和通用算力型u1等实例规格来说,这些实例规格等性能更强,虽然这几个实例规格的云服务器通常处理器与内存的配比为都是1:4,但是他们在处理器、存储、网络、安全等方面等性能并不是一样的,所以他们的适用场景也有着不同。本文为大家介绍通用型g7、g8a、g8y、g8i实例的性能、适用场景的区别以及选择参考。
|
22天前
|
存储 机器学习/深度学习 编解码
阿里云服务器计算型c7、计算型c8y、计算型c8i实例性能对比与选择参考
目前阿里云在售的云服务器中,主要包含了第6代、第7代、第8代实例规格的云服务器产品,从类别上来说,又分为计算型(c系列)、通用型(g系列)、内存型(r/re系列)、通用算力型(U实例)、大数据型(d系列)、本地SSD型(i系列)、高主频型(hf系列)等不同种类的云服务器实例规格,而在阿里云目前的活动中,计算型(c系列)主要计算型c7、计算型c8y和计算型c8i实例可选,有的新手用户并不清楚这三个计算型实例之间的差别,本文对这三个计算型实例的实例规格、CPU(核)、内存(G)、计算、存储、内存等方面为大家做个对比,让大家了解一下他们之间的不同,以供参考选择。
|
21天前
|
存储 安全 网络协议
阿里云服务器通用型g7、通用型g8y、通用型g8i实例性能和适用场景对比与选择参考
目前阿里云在售的云服务器中,主要包含了第6代、第7代、第8代实例规格的云服务器产品,在选择云服务器实例规格时,对于需要平衡计算、存储和网络性能的应用场景来说,通用型g7、通用型g8y和通用型g8i实例是许多用户的热门选择。为了帮助大家更好地了解这三款实例的区别,并为选择提供参考,本文将详细对比它们的实例规格、CPU、内存、计算、存储、网络等方面的性能,并附上活动价格对比。让大家了解一下他们之间的不同,以供参考选择。
|
26天前
|
机器学习/深度学习 弹性计算 缓存
阿里云服务器经济型e实例与通用算力型u1实例对比分析与选择指南
在阿里云服务器的实例规格中,经济型e实例和通用算力型u1实例是很多个人和普通企业级用户常见的选择,经济型e实例与通用算力型u1实例的主要区别在于性能、应用场景及价格策略。本文将详细对比这两种实例的性能、应用场景及价格策略,以供参考。
|
27天前
|
弹性计算 开发框架 .NET
阿里云服务器购买教程及云服务器地域、实例、操作系统、带宽等参数选择指南
对于初次购买阿里云服务器的用户来说,想使用阿里云服务器搭建网站或者运行APP、小程序等项目,第一步就是要先购买阿里云服务器,下面小编以图文形式给大家介绍一下阿里云服务器的购买流程,以及购买过程中如何云服务器地域、实例、带宽等关键配置和选择这些参数的一些注意事项,以供参考。