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天前
|
Oracle 关系型数据库 数据库
服务器数据恢复—服务器raid5阵列数据恢复案例
一台服务器上的8块硬盘组建了一组raid5磁盘阵列。上层安装windows server操作系统,部署了oracle数据库。 raid5阵列中有2块硬盘的硬盘指示灯显示异常报警。服务器操作系统无法启动,ORACLE数据库也无法启动。
42 17
|
13天前
|
弹性计算 关系型数据库 MySQL
阿里云服务器搭建网站教程:经济型e实例2核2G快速搭建网站图文教程参考
目前在阿里云的活动中,轻量应用服务器2核2G3M带宽只要68元1年,2核4G4M带宽只要298元1年。云服务器ECS经济型e实例2核2G 3M固定带宽,价格只要99元/1年,新老用户都可购买,企业用户购买2核4G5M带宽199元一年,为用户提供长期权益。这些都是个人和普通企业用户搭建网站使用较多的云服务器,本文为大家展示使用经济型e实例2核2G3M带宽快速搭建网站的相关教程,以供参考。
112 18
|
18天前
|
运维 数据挖掘 Windows
服务器数据恢复—服务器硬盘指示灯亮黄灯的数据恢复案例
服务器硬盘指示灯闪烁黄灯是一种警示,意味着服务器硬盘出现故障即将下线。发现这种情况建议及时更换硬盘。 一旦服务器上有大量数据频繁读写,硬盘指示灯会快速闪烁。服务器上某个硬盘的指示灯只有黄灯亮着,而其他颜色的灯没有亮的话,通常表示这块硬盘出现故障,这时候更换新硬盘同步数据即可。 如果没有及时发现硬盘损坏或者更换硬盘失败导致服务器崩溃,应该如何恢复数据呢?下面通过一个真实案例讲解一下服务器硬盘指示灯亮黄色的数据恢复案例。
|
1天前
|
存储 人工智能 安全
阿里云服务器五代、六代、七代、八代实例简介及性能提升介绍参考
随着技术的不断进步,阿里云服务器实例也经历了多代升级,从五代实例到最新的八代实例,每一代都在性能、稳定性、能效比等方面取得了显著提升。有的用户由于是初次接触阿里云服务器,所以不是很清楚阿里云服务器五代、六代、七代、八代实例有哪些,它们各自在云服务器性能上有哪些提升。本文将详细介绍阿里云服务器五代、六代、七代、八代实例的特点及性能提升,以供了解及选择。
阿里云服务器五代、六代、七代、八代实例简介及性能提升介绍参考
|
4天前
|
存储 弹性计算 应用服务中间件
阿里云轻量应用服务器出新品通用型实例了,全球26个地域可选
近日,阿里云再度发力,推出了首款全新升级的轻量应用服务器——通用型实例。这款服务器实例不仅标配了200Mbps峰值公网带宽,更在计算、存储、网络等基础资源上进行了全面优化,旨在为中小企业和开发者提供更加轻量、易用、普惠的云计算服务,满足其对于通用计算小算力的迫切需求。目前,这款新品已在全球26个地域正式上线,为全球用户提供了更加便捷、高效的上云选择。
|
5天前
|
存储 安全 数据安全/隐私保护
阿里云服务器五代、六代、七代、八代实例简介及性能提升介绍
随着技术的不断进步,到2025年,阿里云服务器实例也经历了多代升级,从五代实例到最新的八代实例,每一代都在性能、稳定性、能效比等方面取得了显著提升。有的用户由于是初次接触阿里云服务器,所以不是很清楚阿里云服务器五代、六代、七代、八代实例有哪些,它们各自在云服务器性能上有哪些提升。本文将详细介绍阿里云服务器五代、六代、七代、八代实例的特点及性能提升,帮助用户更好地了解并选择适合自己的云服务器实例。
|
5天前
|
数据挖掘 数据库
服务器数据恢复—Zfs文件系统下误删除数据的恢复案例
服务器数据恢复环境&故障: 一台zfs文件系统的服务器,管理员误操作删除了服务器上的数据。
|
7天前
|
存储 弹性计算 安全
阿里云服务器经济型e实例4核16G和8核32G特惠云服务器测评参考
阿里云有两款特惠云服务器——4核16G10M带宽和4核32G10M带宽,系统盘都是100G ESSD Entry,价格分别仅需70元1个月和160元1个月。那么,这两款云服务器到底性能如何?适用于哪些场景?是否值得购买?本文将全方位深入测评这两款特惠云服务器,并为您提供详细的购买建议。
|
12天前
|
存储 人工智能 网络协议
浅聊阿里云倚天云服务器:c8y、g8y、r8y实例性能详解与活动价格参考
选择一款高性能、高性价比的云服务器对于企业而言至关重要,阿里云推出的倚天云服务器——c8y、g8y、r8y三款实例,它们基于ARM架构,采用阿里自研的倚天710处理器,并基于新一代CIPU架构,通过芯片快速路径加速手段,实现了计算、存储、网络性能的大幅提升。2025年,计算型c8y云服务器活动价格860.65元一年起,通用型g8y云服务器活动价格1187.40元一年起,内存型r8y云服务器活动价格1454.32元一年起。本文将为大家详细解析这三款实例的性能特点、应用场景以及最新的活动价格情况,帮助大家更好地了解阿里云倚天云服务器。
|
7天前
|
存储 数据挖掘 数据库
服务器数据恢复—EMC UNITY 400存储卷被误删除的数据恢复案例
EMC Unity 400存储连接了2台硬盘柜。2台硬盘柜上一共有21块硬盘(520字节)。21块盘组建了2组RAID6:一组有11块硬盘,一组有10块硬盘。 在存储运行过程中,管理员误操作删除了 2组POOL上的部分数据卷。