react服务器渲染的示例分析

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

创新互联建站主营金寨网站建设的网络公司,主营网站建设方案,app开发定制,金寨h5小程序设计搭建,金寨网站营销推广欢迎金寨等地区企业咨询

前言

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

SSR 介绍

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



 
  
  
  
  
  React App
 
 
  
  
    
  1. 如果main.js 加载比较慢,会出现白屏一闪的现象。

  2. 传统的搜索引擎爬虫因为不能抓取JS生成后的内容,遇到单页web项目,抓取到的内容啥也没有。在SEO上会吃很多亏,很难排搜索引擎到前面去。

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

React SSR介绍

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

react服务器渲染的示例分析

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

react服务器渲染的示例分析

这个业务流程图比较清晰了,服务端只生成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了,目录结构如下:

react服务器渲染的示例分析

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

 render() {
  return (
   
    
     
     

      Edit src/App.js and save to reload.      

            Learn React               
  );  } } export default App;

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

react服务器渲染的示例分析

.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
};

// 实例化 koa
const 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代码检查下:

react服务器渲染的示例分析

react服务器渲染的示例分析
没有{{root}}了,服务器渲染成功!

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


本文名称:react服务器渲染的示例分析
URL链接:http://pwwzsj.com/article/jshgpe.html

其他资讯