react实现ssr服务器端渲染总结和案例(实例)
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
react实现ssr服务器端渲染总结和案例(实例)的更多相关文章
- 基于vue现有项目的服务器端渲染SSR改造
前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
- React服务器端渲染值Next.js
昨天leader给分配了新任务,让熟悉一下ssr,刚开始有点懵,啥玩意?百度了一下,不就是服务器端渲染(server side render,简称: ssr). ssr简介 服务端渲染一个很常见的场景 ...
- 细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染(ssr)
细说后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr) 前端与后端渲染方式的发展大致经历了这样几个阶段:后端模板渲染.客户端渲染.node 中间层.服务器端渲染(ssr). 1. 后端 ...
- 基于React服务器端渲染的博客系统
系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...
- 入职第一天:前端leader手把手教我入门Vue服务器端渲染(SSR)
继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR). SSR,英文全称叫 Serv ...
- 玩转 React 服务器端渲染
React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染的基 ...
- React服务器端渲染框架next.js项目实战及部署上下文context问题解决办法
在前段时间折腾过搭建react服务器端项目架构,点击这里了解下,正好最近有个重构PC网站的需求,考虑SEO等因素.在做技术选型的时候决定采用nextjs.项目开发过程中,nextjs的体验非常棒,个人 ...
- React 服务器端渲染流程
其实我们在访问客户端渲染的页面时,请求到的只是一个 html 空壳,里面引入了一个 js 文件,所有的内容都是通过 js 进行插入的,正是因为页面是由 js 渲染出来的,所以会带来如下几个问题: 1. ...
- webpack4+koa2+vue 实现服务器端渲染(详解)
_ 阅读目录 一:什么是服务器端渲染?什么是客户端渲染?他们的优缺点? 二:了解 vue-server-renderer 的作用及基本语法. 三:与服务器集成 四:服务器渲染搭建 4.1 为每个请求创 ...
随机推荐
- CSS之浮动元素
<html> <head> <meta charset="utf-8"> <title></title> <sty ...
- Java 8 (7) 重构、测试和调试
为改善可读性和灵活性重构代码 看到这里我们已经可以使用lambda和stream API来使代码更简洁,用在新项目上.但大多数并不是全新的项目,而是对现有代码的重构,让它变的更简洁可读,更灵活. 改善 ...
- mysql中数据库的设计
软件开发流程(CMMI): 1):项目启动; 2):项目计划: 3):需求分析; 需要得到的结果是什么? 4):系统设计; 该怎么做? 5):系统开发; 6):系统测试; 7):系 ...
- LN : leetcode 53 Maximum Subarray
lc 53 Maximum Subarray 53 Maximum Subarray Find the contiguous subarray within an array (containing ...
- firefox + pentadactyl 实现纯绿色高效易扩展浏览器(同时实现修改默认状态栏样式)
这几天开始使用firefox+pentadactyl来搭建一个开源.可扩展.完全绿化的浏览器环境,以便随身带着使用,其中firefox的使用了24.0的长期支持版, 这边版本稳定, 快速, 兼容性好, ...
- asp.net MVC 和 webForm的区别
asp.net MVC请求过程 ASP.NET MVC框架只是给开发者提供了开发web应用程序的一种选择,并不是要取代Webform这两种技术各有优缺点,开发者需要根据实际情况,选择对应的技术有时候, ...
- ASP.NET跨页面传值技巧[总结]
个人网站:http://www.51pansou.com .net视频下载:.net视频教程 .net源码下载:.net源码 关于页面传值的方法,我就我个人观点做了些总结,希望对大家有所帮助. 1. ...
- acedssget F 方式
ads_point p1; ads_point p2; acedGetPoint(NULL, _T("\n插入第一点"), p1); acedGetPoint(p1, _T(&qu ...
- adb 命令实用
1.adb安装:adbinstall.bat:原理:将apk文件拖进此bat,install命令会强制(覆盖)安装apk安装包.代码如下: @echo on adb install -r % paus ...
- csr_matrix参数解析
压缩稀疏矩阵构造时的参数从官网看不明白,参考如下: >>> indptr = np.array([0, 2, 3, 6]) >>> indices = np.arr ...