当前位置: 首页 > 工具软件 > koa-seo > 使用案例 >

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

方茂
2023-12-01

原地址

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树,只是去做事件绑定等操作。这样就提高了首屏加载的性能。

 

 类似资料: