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月前
|
存储 人工智能 容灾
阿里云服务器2核8G、4核16G、8核32G配置热门实例性能对比与场景化选型指南
2核8G/4核16G/8核32G配置的阿里云服务器在阿里云活动中目前有经济型e、通用算力型u1、通用型g7、通用型g8y和通用型g9i五种实例可选,目前2核8G配置选择u1实例活动价格652.32元1年起,4核16G月付选择经济型e实例最低89元1个月,8核32G配置160元1个月起,本文将为大家解析经济型e、通用算力型u1、通用型g7及通用型g8y实例,帮助用户根据自身需求合理选择最适合的实例规格和配置。
|
1月前
|
存储 弹性计算 安全
阿里云渠道商:新手如何选择阿里云ECS实例?
阿里云ECS凭借弹性扩展、稳定可靠与安全防护,助力企业高效上云。本文系统解析实例规格选择关键因素:业务场景匹配、性能评估、成本优化、地域部署与扩展规划,结合计费模式与实际需求,提供科学选型建议,助您精准匹配资源,提升云上效能。(238字)
|
3月前
|
存储 缓存 安全
阿里云服务器热门实例选择参考:e/u1/c7/c8y/c9i/g7/g8y/g9i/r7/r8y/r9i实例适用场景汇总
通过阿里云的活动购买云服务器时,除了轻量应用服务器之外,活动内的云服务器实例规格主要以e/u1/c7/c8y/c9i/g7/g8y/g9i/r7/r8y/r9i这几种为主。本文主要为介绍阿里云服务器的实例规格是什么,有什么用,并汇总了阿里云轻量应用服务器和这些热门云服务器实例规格的适用场景,以供大家了解和选择适合自己的需求的实例规格。
|
3月前
|
存储 弹性计算 缓存
企业级云服务器租用一年需要多少预算?199元2核4G5M带宽阿里云u1实例评测
阿里云企业用户专享,仅需199元/年即可租用ECS通用算力型u1实例(2核4G、5M带宽、80G云盘),适用于中小企业官网、电商展示、数据分析等场景。支持多地域部署,新老用户均可享受,性价比高,助力企业稳定运营。
326 7
|
2月前
|
存储 弹性计算 网络协议
阿里云服务器ECS通用算力型u2a实例,CPU采用AMD EPYC处理器,睿频最高3.7 GHz
阿里云ECS通用算力型u2a实例搭载AMD EPYC处理器,睿频高达3.7GHz,基于CIPU架构,网络与存储突发带宽最高25Gbps,I/O性能强、延迟低。支持多种云盘及IPv4/IPv6,适用于中小型数据库、APP服务等场景,性价比高,官网价降低9%-22%,是中小企业上云优选。
504 0
|
3月前
|
存储 弹性计算 安全
阿里云轻量服务器通用型、CPU优化型、多公网IP型、国际型、容量型不同实例区别与选择参考
阿里云轻量应用服务器实例类型分为通用型、CPU优化型、多公网IP型、国际型、容量型,不同规格族的适用场景和特点不同,收费标准也不一样。本文为大家介绍轻量应用服务器通用型、多公网IP型、容量型有何区别?以及选择参考。
|
1月前
|
存储 缓存 安全
阿里云轻量应用服务器实例:通用型、多公网IP型、CPU优化、国际及容量型区别对比
阿里云轻量服务器分通用型、CPU优化型、多公网IP型、国际型和容量型。通用型适合网站与应用;CPU优化型提供稳定高性能计算;多公网IP型支持2-3个IP,适用于账号管理;国际型覆盖海外地域,助力出海业务;容量型提供大存储,适配网盘与实训场景。
214 1