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

69 阅读 0 评论 46 点赞

我是靠谱客的博主故意羽毛，最近开发中收集的这篇文章主要介绍基于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树，只是去做事件绑定等操作。这样就提高了首屏加载的性能。