超简单react服务器渲染(ssr)入坑指南详细说明

时间：2021-08-27 来源：互联网编辑：宝哥软件园浏览：次

前言

本文是基于react ssr的入门教程，在实际项目中使用需要更多的配置和优化，更适合初次尝试react ssr的朋友。技术涉及koa2 react，案例是使用create-react-app创建的

SSR简介

服务器幻灯片呈现，缩写为ssr，是服务器端呈现。这要从SEO说起。目前react单页应用的HTML代码如下

！DOCTYPE html html lang=' en ' Head meta charset=' utf-8 '/link rel='快捷图标' href=' fav icon . ico ' rel=' external no follow '/meta name=' viewport ' content=' width=device-width，initial-scale=1，收缩到适合=no '/meta name=' theme-color ' content=' # 000000 '/title react App/title/Head body no script您需要启用JavaScript才能运行此应用程序。/no script div id=' root '/div script src=' http :/js/main.js '/script/body/html如果main . js加载缓慢，白屏会闪烁。传统的搜索引擎爬虫无法抓取JS生成的内容，因此遇到单页web项目，什么也得不到。SEO会有很多损失，所以搜索引擎很难排在前面。React SSR(react Server Rendering)正好解决了这两个问题。

反应式SSR简介

这里有个例子带你入坑！使用create-react-app创建一个react项目。因为我们想修改webpack，这里我们使用react-app-retired来启动项目。根目录创建一个服务器目录来存储服务器代码，这里我们使用koa2。目录结构如下：

让我们来看看ssr是如何工作的。

这个业务流程图很清晰。服务器只生成HTML代码，但实际上前端会生成一个main.js供服务器在HTML中使用。这就是react ssr的工作流程。用这个图会更好理解。如果这个业务没有理解清楚，下面的估计就很难理解了。

react提供了两种SSR方法：renderToString和renderToStaticMarkup。区别如下：renderToString方法在呈现时具有data-reactive属性。浏览器访问页面时，main.js可以识别HTML内容，不会执行React.createElement再次创建DOM。RenderToStaticMarkup没有数据反应属性，所以页面看起来更干净。浏览器访问页面时，main.js无法识别HTML内容，所以会执行main.js中的React.createElement方法来重新创建DOM。实现进程

好了，我们都知道原理了，可以开始编码了。目录结构如下：

我还没有接触过create-react-app的演示。我直接拿来当案例，但是前端项目基本没变。稍后我们将在服务器端使用这个模块。代码如下：

render(){ return(div CLaSS name=' App ' header CLaSS name=' App-header ' img src={ logo } CLaSS name=' App-logo ' alt=' logo '/p编辑codesrc/App.js/code并保存以重新加载。/p a class name=' App-link ' href=' https://reactjs . org ' rel=' external no follow ' target=' _ blank ' rel=' noopener no Ferrer ' Learn React/a/header/div)；} }导出默认App在项目中创建一个新的服务器目录来存储服务器代码。为了简化，我这里只有2个文件，我们在项目中使用ES6，所以我们必须配置。babelrc。

。babelrc配置，因为要使用到ES6{ '预置： [ 'env '，' react' ]，' plugins ' :[' transform-decorator-legacy '，' transform-runtime '，' react-hot-loader/babel '，' add-module-exports '，' transform-object-rest-spread '，[ 'import '，{ 'libraryName': 'antd '，' style ' : true }]}索引。js .项目入口做一些预处理，使用资产需求挂钩过滤掉一些类似从""导入徽标/徽标。' SVG '；这样的资源代码。因为我们服务端只需要纯的超文本标记语言代码，不过滤掉会报错。这里的名字，我们是去掉了混杂值的require(' asset-require-hook ')({扩展名s :[' SVG '，' css '，' less '，' jpg '，' png '，' gif']，名称： '/static/media/[name].[ext]' })；require(' babel-core/register ')；require(' babel-poly ill ')；要求('。/app ')；public/index.html模版代码要做个调整，{{root}}这个可以是任何可以替换的字符串，等下服务端会替换这段字符串。DOCTYPE html html lang=' en ' head meta charset=' utf-8 '/link rel='快捷图标href=' % PUBLIC _ URL %/fav图标。ico ' rel='外部无跟随'/meta name=' viewport ' content=' width=device-width，initial-scale=1，缩小到适合=no '/meta name=' theme-color ' content=' # 000000 '/link rel=' manifest ' href=' % PUBLIC _ URL %/manifest。JSON ' rel '/no script div id=' root ' { root } }/div/body/html app。射流研究…服务端渲染的主要代码，加载App.js，使用renderToString生成超文本标记语言代码，去替换掉index.html中的{{root}}部分从导入应用程序'./src/App '；从Koa导入Koa从“反应”导入做出反应；从“KOA-路由器”导入路由器；从" fs "导入fs；从“KOA-静态”导入koaStatic从"路径"导入路径；从" react-DOM/服务器"导入{ renderToString }；//配置文件const config={端口： 3030 }；//实例化Koa const app=new Koa()；//静态资源app。使用(Koastatic(路径。join(_ _ dirname)'，/build ')，{ maxage: 365 * 24 * 60 * 1000，index: 'root' //这里配置不要写成'索引'就可以了，因为在访问localhost:3030时，不能让服务默认去加载index.html文件，这里很容易掉进坑。 }));//设置路由app.use(新路由器()。get('* '，async (ctx，next)={ CTX。回应。type=' html//指定内容类型让shtml=等待新的承诺((解析，拒绝)={ fs.readFile(路径。联接(__dirname，'./build/index.html ')，' utfa8 '，函数(err，data){ if(err){ reject()；返回控制台。日志(err)；} shtml=数据；resolve()；});});//替换掉{{root}}为我们生成后的CTX。回应。body=shtml。替换(' { { root } } '，renderToString(App/))；}) .routes())；app.listen(config.port，function() { console.log('服务器启动，监听端口：“config.port”正在运行~);});config-overrides.js因为我们用的是创建-反应-应用，这里使用react-app-重新布线去改下工具的配置。因为执行新公共管理运行构建的时候会自动给资源加了混杂值，而这个混杂值，我们在资产需求挂钩的时候去掉了混杂值，配置里面需要改下，不然会出现图片不显示的问题，这里也是一个坑，要注意下模块。导出={ web pack 3360函数(config，env) { //.添加您的web pack config//控制台。日志(JSON。stringify(config))；//去掉混杂值，解决资产需求挂钩资源问题配置。模块。规则。foreach(d={ d . oneof d . oneof。foreach(e={ if(e . options e . options。名称){ e . options。name=e . options。名字。替换“[hash :8]”。 '');} });});返回配置；}};好了，所有的代码就这些了，是不是很简单了？我们koa2读取的静态资源是建设目录下面的。先执行新公共管理运行构建打包项目，再执行节点。/服务器启动服务端项目。看下http://localhost:3030页面的超文本标记语言代码检查下：