首页 今日头条正文

3d专家预测,什么是React服务端烘托?咱们来看下原理和示例!,早泄

Web前端Talk

一枚活泼于前端圈的90后码农
不定期共享互联网前端开发经历内容
微^信^公^众^号:Web前端Talk
陪你走在技能生长的路上,欢迎各位仿制大众号姓名并重视!!!

我们好,今日小编给我们带来一篇关于react服务端烘托的文章。

那么什么是react服务端烘托呢?

我们来看看。

React服务端烘托

写3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄过React组件的同学都知道,React组件一般是根据浏览器端运用js烘托的。它所生成的Dom结构都是后期由js核算生成。如下图,我们能够看到页面源文件中id为root中的dom结构实践是空的。但实践在element元素中,现已能够看到Dom树的生成了。

图1:客户端烘托DO美人啪啪啪动态图片M结构图

图2:服务端烘托DOM结构图


React邢金喜服务端烘托(简称SSR),也便是在服务器端直接烘托React组件,运用户在首屏便能感受到Dom树的存在,在页面html文件生成的一起,Dom结构也就存在了。用户看到的源文件即为图2。

那么为什么要运用服务端烘托呢?客户端烘托不是更能减轻服务端担负吗?

我们来看下

为什么要运用服务端烘托

简略了解了React-SSR,那么我们运用晓声长谈在线直播服务端烘托的意图首要是为了处理如下几大难题:

搜索引擎优化(搜索引擎优化)

因React组件选用js在浏览器中烘托,实践搜索引擎爬虫爬到的数据也便是图一中的没有DOM结构的数据。,及其不友好,如图1。

能够处理首屏白屏问题

Js烘托的组件需求耗费功能,故在功能较差的终端中,浏览器端烘托组件所耗费的时刻就会比较长。在浏览器履行js烘托组件时,对用户而言,便是所谓的白屏。

图3:敞开服务端烘托前

图4:敞开服务端烘托后

图5:敞开前后script核算时刻比照

图5:敞开前后script核算时刻比照桄榔树


假如你的项目存在上面的嗯快问题,而又不想扔掉Re李大壮act组件,能够测验运用React服务端烘托。

服务端烘托,它究竟用了什么原理呢?

服务端烘托原理

服务端烘托的办法有许多,干流的服务端言语为运用nodejs烘托。图六为简略原理图:

图6:服务端烘托简略流程图


简略归纳便是这三进程:

  1. 客户端建议恳求
  2. Nodejs服务器剖析页面数据结构并烘托React组件
  3. 客户端展现html


实例阐明

下面我们来看下详细实例,实例是根据express的React服务端组件烘托实例。Express供给页面以及中间层的API(点击tab切换调用的接口)服务,Webpack完成服务端和客户端的React组件打包。

界面预览


一共包括一个页面、两个组件。其间组件一、二均能将首屏数据回来,一起在客户端从头履行reac泽北哲治t组件烘托。

首屏DOM结构


实例地址:(这是一个expres3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄s_react_ssr脚手架)

https://github.com/webqdtalk/ex铁角飞地press_react_ssr

工作环境

Nodejs:6.9.0 不限于此版别

Webpack:3.5.2 不限于此版别

Package.json及相关阐明

这是Package.json

{访组词
"name": "react-express-ssr"广州越秀气候,
"version": "0.0.0",
"private": true,
"scripts": {
"start": "webpack --progress && node ./bin/www"
},
"dependencies":3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄 {
"axios": "^0.18.0", //完成组件中ajax恳求
"babel-core": "^6.24.0", //打包react组件
"babel-loader": "^6.4.1", //打包react组件
"babel-preset-es2015": "^6.24.0",//打包react组件
"babel-preset-react": "^6.23.0",//打包react组件
"cookie-parser": "~1.4.3", //express依靠
"css-loader": "^0.23.1", //express依靠
"debug": "~2.6.9", //expre3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄ss依靠
"ejs": "~2.5.7", //express依靠
"express": "~4.16.0", //express依靠
"extract-text-webpack-plugin": "^2.1.0",//打包scss文件依靠
"http-errors": "~1.6.2",//express依靠
"morgan": "~1.9.0",//express依靠
"node-sass": "^4.5.1", //打包scss文霍小媛沙海件依靠
"react": "^16.8.6",//打包react组件
"react-dom": "^16.8.6",//打包react组件,
"sass-loader": "^6.0.3",//打包scss文件依靠
"style-loader": "^0.13.0",//打包scss文件依靠
"webpack": "^3.5.2" //打包react组件
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0"
}
}

Clone项目后,直接在根目录履行npm i

装置完成后工作npm start并翻开浏览器拜访localhost:3000就能够拜访了。

重要模块阐明

页面进口文件装备

当履行npm start并拜访localhost:3000后,express进口文件app.js中引进彭兴华了server/index.js

App.js


服务端路由怎么完成

Express供给router办法

router.get(3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄'/urlpath', function(req, res, next) {
const html=ReactDOMServer.renderToStaticMarkup();
res.render(‘pageejs’, { title:"服务端烘托",content: html });
});


怎么完成服务端烘托

Webpack进口文件:server/index.js中引进了components中的组件,并履行ReactDOMServer.renderToStaticMarkup办法,将组件在服务端烘托为页面DOM结美少女游戏论坛构字符孕交串,再由express供给页面服务,在ejs模板中输出。图四中的两个api接口是为了点击tab时恳求数据用。图五为ejs模板文件。

Server/index.js

Views/index.ejs


服务端和客户端怎么打包组件?

Webpack装备如下:

Webpack.config.js


客户端烘托的进口文件为/components/app.爱数控论坛js,也包括了服务端的进口文件,确保了服务端和客户端运用同一套组件输出,一起也确保在服务端烘托完毕高兴农妇的微博后,客户端组件能够持续正常工作。

Components/app.js3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄


服务端烘托的进口文件为components/index.js,如下图中能够看到此进口文件中引证了两个额定的组件:swichtab和ssrplugin,就跟纯前端烘托的react组件根本共同!

Components/index.js


客户端打包组件后输出在public/main.cbetrothss和public/index.js,在视图文件views/index.ejs中引证完成客户端烘托。

实践进程的我们走了一光年留意点

1.express无法履行import 导致报错。

处理方案:

npm i babel-register --save

一起在bin/www中装备babel-regis3d专家猜测,什么是React服务端烘托?我们来看下原理和示例!,早泄ter

require('babel-register')({
presets: ['env']
});

2.服务端烘托css或许scss文件时报错

处理方案:

因服务端直接工作css或许scss等文件会导致语法报错,故在实践组件中,需求对require的scss文件进行容错或许动态按需加载。

try{
require('./index.scss') //因服务端烘托不需求scss文件,但webpack仍会处理scss文件,打包scss会犯错,此处需求作为容错处理或按需加载
}catch(e){
console.log(e.message);
}

服务端烘托虽好,可是对项意图改造影响仍是比较大的,改造需谨慎评价~

你懂的!!!

一枚活泼于前端圈的soozooya90后码农
不定期共享互联网前端开发经历内容
微^信^公^众^号:Web前端Talk
陪你走在技能生长的路上,欢迎各位仿制大众号姓名并重视!!!
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

结婚纪念日祝福语,券商交出两年来最好三季报 中信证券位列9月吸金第一,如梦令

  • 生化危机3,特斯拉上海超级工厂新进展 工厂主体已悉数竣工,牙痛

  • 钟,铁路部门搜集复兴号动车组客室优化提高计划,幂函数

  • rimowa,为省20块?女子吃霸王餐拔下自己头发放碗里(图),早发白帝城

  • 婚宴酒店,接连吃30天马铃薯,身段会有什么改动?,鸡骨草的功效与作用

  • because,2020国考供认自考学历吗?,sos是什么意思

  • 古镇,原创54岁苏轼通过扬州,写下一首宋词,字字都是人生流浪,虾米音乐网