导航：首页 > 开发技术 >

react服务器渲染的示例分析

发表于：2024-09-22 作者：千家信息网编辑

千家信息网最后更新 2024年09月22日，这篇文章给大家分享的是有关react服务器渲染的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。前言本文是基于react ssr的入门教程，在实际项目中使用还需要做更

千家信息网最后更新 2024年09月22日react服务器渲染的示例分析

这篇文章给大家分享的是有关react服务器渲染的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

前言

本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建

SSR 介绍

Server Slide Rendering，缩写为 ssr 即服务器端渲染，这个要从SEO说起，目前react单页应用HTML代码是下面这样的

           React App

如果main.js 加载比较慢，会出现白屏一闪的现象。
传统的搜索引擎爬虫因为不能抓取JS生成后的内容，遇到单页web项目，抓取到的内容啥也没有。在SEO上会吃很多亏，很难排搜索引擎到前面去。

React SSR（react服务器渲染）正好解决了这2个问题。

React SSR介绍

这里通过一个例子来带大家入坑！先使用create-react-app创建一个react项目。因为要修改webpack，这里我们使用react-app-rewired启动项目。根目录创建一个server目录存放服务端代码，服务端代码我们这里使用koa2。目录结构如下：

这里先来看看react ssr是怎么工作的。

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

react提供的SSR方法有两个renderToString 和 renderToStaticMarkup，区别如下：

renderToString 方法渲染的时候带有 data-reactid 属性. 在浏览器访问页面的时候，main.js能识别到HTML的内容，不会执行React.createElement二次创建DOM。
renderToStaticMarkup 则没有 data-reactid 属性，页面看上去干净点。在浏览器访问页面的时候，main.js不能识别到HTML内容，会执行main.js里面的React.createElement方法重新创建DOM。

实现流程

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

create-react-app 的demo我没动过，直接用这个做案例了，前端项目基本上就没改了,等会儿我们服务器端要使用这个模块。代码如下：

 render() {  return (                       Edit src/App.js and save to reload.     
           Learn React         
   
  ); }}export default App;

在项目中新建server目录，用于存放服务端代码。为了简化，我这里只有2个文件，项目中我们用的ES6，所以还要配置下.babelrc

.babelrc 配置，因为要使用到ES6

{  "presets": [    "env",    "react"  ],  "plugins": [    "transform-decorators-legacy",    "transform-runtime",    "react-hot-loader/babel",    "add-module-exports",    "transform-object-rest-spread",    "transform-class-properties",    [      "import",      {        "libraryName": "antd",        "style": true      }    ]  ]}

index.js 项目入口做一些预处理，使用asset-require-hook过滤掉一些类似 import logo from "./logo.svg"; 这样的资源代码。因为我们服务端只需要纯的HTML代码，不过滤掉会报错。这里的name，我们是去掉了hash值的

require("asset-require-hook")({ extensions: ["svg", "css", "less", "jpg", "png", "gif"], name: '/static/media/[name].[ext]'});require("babel-core/register")();require("babel-polyfill");require("./app");

public/index.html html模版代码要做个调整，{{root}} 这个可以是任何可以替换的字符串，等下服务端会替换这段字符串。

             React App      {{root}}

app.js 服务端渲染的主要代码，加载App.js，使用renderToString 生成html代码，去替换掉 index.html 中的 {{root}} 部分

import App from '../src/App';import Koa from 'koa';import React from 'react';import Router from 'koa-router';import fs from 'fs';import koaStatic from 'koa-static';import path from 'path';import { renderToString } from 'react-dom/server';// 配置文件const config = { port: 3030};// 实例化 koaconst app = new Koa();// 静态资源app.use( koaStatic(path.join(__dirname, '../build'), {  maxage: 365 * 24 * 60 * 1000,  index: 'root'   // 这里配置不要写成'index'就可以了，因为在访问localhost:3030时，不能让服务默认去加载index.html文件，这里很容易掉进坑。 }));// 设置路由app.use( new Router()  .get('*', async (ctx, next) => {   ctx.response.type = 'html'; //指定content type   let shtml = '';   await new Promise((resolve, reject) => {    fs.readFile(path.join(__dirname, '../build/index.html'), 'utfa8', function(err, data) {     if (err) {      reject();      return console.log(err);     }     shtml = data;     resolve();    });   });   // 替换掉 {{root}} 为我们生成后的HTML   ctx.response.body = shtml.replace('{{root}}', renderToString());  })  .routes());app.listen(config.port, function() { console.log('服务器启动，监听 port： ' + config.port + ' running~');});

config-overrides.js 因为我们用的是create-react-app，这里使用react-app-rewired去改下webpack的配置。因为执行npm run build的时候会自动给资源加了hash值，而这个hash值，我们在asset-require-hook的时候去掉了hash值，配置里面需要改下，不然会出现图片不显示的问题，这里也是一个坑，要注意下。

module.exports = { webpack: function(config, env) {  // ...add your webpack config  // console.log(JSON.stringify(config));  // 去掉hash值，解决asset-require-hook资源问题  config.module.rules.forEach(d => {   d.oneOf &&    d.oneOf.forEach(e => {     if (e && e.options && e.options.name) {      e.options.name = e.options.name.replace('[hash:8].', '');     }    });  });  return config; }};

好了，所有的代码就这些了，是不是很简单了？我们koa2读取的静态资源是 build目录下面的。先执行npm run build打包项目，再执行node ./server 启动服务端项目。看下http://localhost:3030页面的HTML代码检查下：

没有{{root}}了，服务器渲染成功！

感谢各位的阅读！关于"react服务器渲染的示例分析"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

很赞哦！