基于create-react-app 和 koa2 快速搭建react同构渲染项目总结（react针对seo优化）

原地址

https://github.com/yangfan0095/react-koa2-ssr

启动

npm install

客户端运行

npm run start

服务端运行

先执行客户端打包在运行server (个人推荐使用vscode作为服务端开发工具)

npm run build

npm run server

前言

前段时间做了一个简单的古文网 ，但是项目是使用React SPA 渲染的，不利于SEO，便有了服务端渲染这个需求。后面就想写个demo把整个过程总结一下，同时也加深自己对其的理解，期间由于工作，过程是断断续续 。总之后来就有了这个项目吧。关于服务端渲染的优缺点，vue服务端渲染官方文档讲的最清楚。 对于大部分场景最主要还是两点 提高首屏加载速度 和方便SEO.为了快速构建开发环境，这里直接使用create-react-app 和koa2.x生成一个基础项目 。整个项目便是以此作为基点进行开发的，目前也只是完成了最基本的需求， 还有很多Bug 和可以优化的地方， 欢迎交流。

服务端渲染最基本的理论知识梳理

首先前后端分别使用create-react-app 和koa2的脚手架快速生成， 然后再将两个项目合并到一起。这样我们省去了webpack的一些繁琐配置 ，同时服务端使用了babel编译。看这个之前 默认已经掌握webpack 和 koa2.x,babel的相关知识。 我们直切重要的步骤吧。我觉得搭建一个react-ssr环境主要只有两点 一个是前后端路由的同构和 异步数据的同构。因此这个简单的demo主要从这两方面入手。

react 服务端渲染梳理

• react 服务端渲染的条件
• react-router4.x 与koa2.x 路由实现同构
• redux 初始数据同构

react 服务端渲染的条件

其实可以看 《深入React技术栈》的第七章， 介绍的非常详细。 概括来说 React 之所以可以做到服务端渲染 是因为ReactDOM提供了服务端渲染的API

• renderToString  把一个react 元素转换成带reactid的html字符串。
• renderToStaticMarkup 转换成不带reactid的html字符串，如果是静态文本，用这个方法会减少大批的reactid. 这两个方法的存在 ，实际上可以把react看做是一个模板引擎。解析jsx语法变成普通的html字符串。

我们可以调用这两个API 实现传入ReactComponent 返回对应的html字符串到客户端。浏览器端接收到这段html以后不会重新去渲染DOM树，只是去做事件绑定等操作。这样就提高了首屏加载的性能。