干货示例：什么是React服务端渲染？

富家小姐来报到。今天想不出问题，就随便抓了抓头发。没想到，没想到我的浓（mei）密（sheng）茂（ji）茂（gen）发少了好几根，一定要改掉这个想不到就拉头发的坏毛病一个问题。今天给大家分享一篇公司老大，很厉害的大神（拜脸）的一篇文章，说说react服务端渲染。React服务端渲染写过React组件的同学都知道，React组件一般都是使用js基于浏览器渲染的。它生成的Dom结构是后期js计算生成的。如下图所示，我们可以看到id为root的页面源文件中的dom结构其实是空的。但其实在element元素中，已经可以看到Dom树的生成了。DOM结构图客户端渲染DOM结构图服务器端渲染React服务端渲染（简称SSR），即直接在服务端渲染React组件，让用户感受到Dom树的存在在首屏上，并在页面上生成html文件，同时存在Dom结构。用户看到的源文件如图2。那么为什么要用服务端渲染呢？客户端渲染不是更好的减轻服务端的负担吗？下面我们来看看为什么要使用服务端渲染来简单了解一下React-SSR。然后我们使用服务端渲染来解决以下主要问题：1.搜索引擎优化（seo）因为React组件在浏览器中使用js渲染，搜索引擎爬虫实际爬取的数据是图中没有DOM结构的数据1.，而且不友好，如图1。2.可以解决首屏白屏的问题。Js渲染的组件需要消耗性能，所以在性能较差的终端，浏览器端渲染组件消耗的时间会比较长。当浏览器执行js渲染组件时，对于用户来说，就是所谓的白屏。开启服务端渲染前开启服务端渲染前后脚本计算时间对比如果你的项目存在以上问题，又不想放弃React组件，可以尝试使用React服务端渲染。服务端渲染，它利用了什么原理？服务端渲染原理服务端渲染有很多种方式，主流的服务端语言是使用nodejs进行渲染。下图是一个简单的示意图：服务器端渲染的简单流程图。简单总结一下就是这三个步骤：1.客户端发起请求2.Nodejs服务端解析页面数据结构并渲染React组件3.客户端展示html示例解释下面我们来看一下下面是一个具体的例子.该示例是一个基于express的React服务端组件渲染示例。Express提供页面和中间层API（点击tab切换调用界面）服务，Webpack实现服务端和客户端React组件封装。界面预览一共包含一个页面和两个组件。其中组件1和组件2都可以返回首屏数据，同时在客户端重新执行react组件的渲染。首屏DOM结构示例地址：（这是一个express_react_ssr脚手架）https://github.com/webqdtalk/...运行环境Nodejs：6.9.0不限此版本webpack：3.5.2不限此versionPackage.json及相关说明ThisisPackage.json:{"name":"react-express-ssr","version":"0.0.0","private":true,"scripts":{"start":"webpack--progress&&node./bin/www"},"dependencies":{"axios":"^0.18.0",//实现组件中的ajax请求"babel-core":"^6.24.0",//封装反应组件"babel-loader":"^6.4.1",//封装反应组件"babel-preset-es2015":"^6.24.0",//封装反应组件"babel-preset"-react":"^6.23.0",//封装react组件"cookie-parser":"~1.4.3",//express依赖于"css-loader":"^0.23.1",//expressdependson"debug":"~2.6.9",//express依赖于"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",//打包反应组件,"sass-loader":"^6.0.3",//打包scss文件依赖于"style-loader":"^0.13.0",//打包scss文件依赖于"webpack":"^3.5.2"//packingreactcomponent},"devDependencies":{"babel-preset-env":"^1.7.0","babel-register":"^6.26.0"}}Clone项目后直接执行npmi安装在根目录下完成后运行npmstart打开浏览器访问localhost:3000访问重要模块描述页面入口文件配置执行npmstart访问localhost:3000后快速入口文件app.js引入server/index.jsApp.如何实现js服务器路由Express提供了路由方法router.get('/urlpath',function(req,res,next){consthtml=ReactDOMServer.renderToStaticMarkup();res.render('pageejs',{title:"ServerRendering",content:html});});如何实现服务端渲染webpack入口文件：server/index.端渲染页面的DOM结构字符串，然后提供页面通过express服务，输出到ejs模板中。图4中的两个api接口用于点击tab时请求数据。下图是ejs模板文件。服务器/索引。jsViews/index.ejs服务端和客户端如何封装组件？webpack配置如下：webpack.config.js客户端渲染的入口文件为/components/app.js，其中还包含服务端的入口文件，保证服务端和客户端使用同一套组件输出，同时也保证了服务端渲染完成后，客户端组件可以继续正常工作。components/app.js服务端渲染的入口文件是components/index.js，如下图，这个入口文件引用了两个额外的组件：swichtab和ssrplugin，和纯前端渲染基本一样reactcomponents!Components/index.js客户端封装组件输出到public/main.css和public/index.js，在视图文件views/index.ejs中引用，实现客户端渲染。实践过程中的注意点1.express无法执行import，导致报错。解决方法：npmibabel-register--saveandconfigurebabel-registerrequire('babel-register')({presets:['env']})同时保存到bin/www中；2、服务端渲染css或scss文件时报错解决方法：由于服务端直接运行css或scss文件等文件会导致语法错误，所以在实际组件中需要实现容错或者按需动态加载.scss文件。try{require('./index.scss')//服务端渲染不需要scss文件，但是webpack还是会处理scss文件，打包scss会报错。这个需要作为容错处理或者按需加载}catch(e){console.log(e.message);}虽然服务端渲染不错，但是对改造还是有比较大的影响项目，改造需要仔细评估~你知道的！！！如果有不对的地方，请指正！欢迎关注我的公众号，一起交流，Web前端Talk