详解超简单的react服务器渲染(ssr)入坑指南
前言
本文是基于react ssr的入门教程，在实际项目中使用还需要做更多的配置和优化，比较适合第一次尝试react ssr的小伙伴们。技术涉及到 koa2 + react，案例使用create-react-app创建
SSR 介绍
Server Slide Rendering，缩写为 ssr 即服务器端渲染，这个要从SEO说起，目前react单页应用HTML代码是下面这样的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.ico" rel="external nofollow" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <meta name="theme-color" content="#000000" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script src="/js/main.js"></script> </body> </html>
- 如果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 (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org" rel="external nofollow"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
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}}这个可以是任何可以替换的字符串，等下服务端会替换这段字符串。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">{{root}}</div>
</body>
</html>
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(<App />));
})
.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服务器渲染案例了，这里交出github地址：https://github.com/mtsee/react-koa2-ssr
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简单的React SSR服务器渲染实现
为什么要SSR 单页应用将UI层和内容都由javascript来渲染,搜索引擎或网页爬虫需要完成的HTML结构,因此单页应用如果只在客户端渲染,不利于SEO,此外尽管我们可以通过按需加载的形式来减少首页加载的js,但是通过js来渲染DOM的时候还是会有一定的时间延迟. 0.前言 服务端渲染在项目中不是刚需的东西,但有的时候也是需要做一个服务端渲染,项目要做服务端渲染当然是有很多好处的 首屏加载快,相比SPA单页应用还要有优势. SEO 优化 利于爬虫,爬取数据. 1. 简介 服务端渲染是指页面的
-
详解超简单的react服务器渲染(ssr)入坑指南
前言 本文是基于react ssr的入门教程,在实际项目中使用还需要做更多的配置和优化,比较适合第一次尝试react ssr的小伙伴们.技术涉及到 koa2 + react,案例使用create-react-app创建 SSR 介绍 Server Slide Rendering,缩写为 ssr 即服务器端渲染,这个要从SEO说起,目前react单页应用HTML代码是下面这样的 <!DOCTYPE html> <html lang="en"> <head&g
-
MySQL 复制详解及简单实例
MySQL 复制详解及简单实例 主从复制技术在MySQL中被广泛使用,主要用于同步一台服务器上的数据至多台从服务器,可以用于实现负载均衡,高可用和故障切换,以及提供备份等等.MySQL支持多种不同的复制技术,诸如单向,半同步异步复制等以及不同级别的复制,诸如数据库级别,表级,跨库同步等等.本文简要描述了一个基本的主从复制并给出示例. 1.复制的基本原理(步骤) a.在主库上把数据更改记录的二进制日志(binary log) b.从库上的I/O线程连接到主库并请求发送其二进制日志文件(主库
-
详解samba + OPENldap 搭建文件共享服务器问题
这里我使用的是 samba(文件共享服务) v4.9.1 + OPENldap(后端数据库软件) v2.4.44 + smbldap-tools(后端数据库管理软件) v0.9.11 + CentOS7. 如果有不同,可能会有部分问题. 注: samba 的功能不只有文件共享,还可以作为一台Windows域成员,甚至Windows域控制器.千万不要认为samba只是一个文件共享服务. 由于我们使用了samba的文件共享功能,与文件权限有直接的联系,所以samba中的使用的用户必须是Linux中能
-
详解Nginx如何配置Web服务器的示例代码
概述 今天主要分享怎么将NGINX配置作为Web服务器,并包括以下部分: 设置虚拟服务器 配置位置 使用变量 返回特定状态码 重写HTTP响应 在高层次上,将NGINX配置作为Web服务器有一些问题需要了解,定义它处理哪些URL以及如何处理这些URL上的资源的HTTP请求. 在较低层次上,配置定义了一组控制对特定域或IP地址的请求的处理的虚拟服务器. 用于HTTP流量的每个虚拟服务器定义了称为位置的特殊配置实例,它们控制特定URI集合的处理. 每个位置定义了自己的映射到此位置的请求发生的情况.
-
JSP 注释的详解及简单实例
JSP 注释的详解及简单实例 一 三种格式 二 举例 <body> <h1>大家好</h1> <hr> <!-- 我是HTML注释,在客户端可见 --> <%-- 我是JSP注释,在客户端不可见 --%> <% //单行注释 /*多行注释*/ out.println("大家好,欢迎大家学习JAVAEE开发."); %> <br> 你好,<%=s %><br> x+y
-
mybatis分页插件pageHelper详解及简单实例
mybatis分页插件pageHelper详解及简单实例 工作的框架spring springmvc mybatis3 首先使用分页插件必须先引入maven依赖,在pom.xml中添加如下 <!-- 分页助手 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>3.7.5
-
Java Cache详解及简单实现
Java Cache详解及简单实现 概要: 最近在做spring的项目,想做一个缓存,访问数据库,定期来做数据更新 要实现两个功能 可以通过http请求来立刻刷新缓存 缓存可以通过自己配置的时间间隔来定期刷新 通过Controller来做 因为需要通过http来刷新缓存,所以第一个想法就是把缓存做成一个Controller Controller的实现 Controller最大的优势,就是可以通过Spring的配置,注入很多依赖,比如对Service的依赖,对数据库的依赖等. 大量的访问数据库跟
-
Java File类的详解及简单实例
Java File类的详解及简单实例 1. File():构造函数,一般是依据文件所在的指定位置来创建文件对象. CanWrite():返回文件是否可写. CanRead():返回文件是否可读. CompareTo(File pathname):检查指定文件路径间的顺序. Delet():从文件系统内删除该文件. DeleteOnExit():程序顺利结束时从系统中删除文件. Equals(Object obj):检查特定对象的路径名是否相等. Exists():判断文件夹是否存在. GetA
-
JAVA 注解详解及简单实例
JAVA 注解详解及简单实例 何为注解 注解(Annotation)又称为元数据,在JDK1.5后引入,它的作用是: 生成文档 这是注解的原始用途,可以通过注解生成JavaDoc文档 跟踪代码的依赖性 可以通过注解替代配置文件,简化项目的配置.现有的许多框架都采用这个功能减少自己的配置. 编译检查 在编译时进行格式检查,例如@Override 基础注解 Java目前内置了三种标准注解,以及四种元注解.四种元注解负责创建其他的注解. 三种标准注解 @Override,表示当前的方法覆盖超类中
-
微信小程序中input标签详解及简单实例
微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对