react前后端同构渲染

最新推荐文章于 2024-08-13 17:20:41 发布

我总是喜欢逆光

最新推荐文章于 2024-08-13 17:20:41 发布

阅读量7.3k

点赞数 1

分类专栏：其他

本文链接：https://blog.csdn.net/llm913114267/article/details/68946043

版权

本文介绍了React的前后端同构渲染，详细阐述了实现方式、服务端渲染、react-router和redux的应用，以及优化结果和处理过程。在服务端，使用ReactDOM.renderToString生成HTML字符串，通过react-router匹配路由进行渲染。在前端，利用已有的初始状态生成相同的store，保证数据一致性。同构渲染提高了开发效率和代码复用，优化了首屏性能和SEO。

摘要由CSDN通过智能技术生成

前后端同构渲染：当客户端请求一个包含React组件页面的时候，服务端首先响应输出这个页面，客户端和服务端有了第一次交互。然后，如果加载组件的过程需要向服务端发出Ajax请求等，客户端和服务端又进行了一次交互，这样，耗时相对较长。前后端同构渲染可以在页面初次加载时把所有地方渲染好一次性响应给客户端

实现方式：保证包管理工具和模块依赖方式一致
包管理工具-npm管理，保证前后端都使用同一个兼容包
模块依赖方式-webpack，保证前后端都采用commonjs的依赖方式，确保代码可以互相依赖

服务端如何渲染：
react全家桶：react、react-router、redux
react 和 reactDOM
reactDOM在这里提供的支持就是reactDOM.render和reactDOM.renderToString函数，其中欠着会在浏览器生成DOM结构，后者会在服务端生成对应的HTML字符串模板。react会在生成的DOM结构上添加一个 data-react-checksum的属性，这是一个 adler32 算法的校验和，用以确保两份模板的一致性。
这里写图片描述
同时 react 的生命周期在前后端渲染过程中也有所不同。前端渲染的组件拥有完整的生命周期，而后端渲染仅有 componentWillMount 的生命周期。这就意味着，如果我们想进行前后端共同操作的逻辑，如发送数据请求等，可以放在 componentWillMount 的生命周期中；如果想单独处理客户端的逻辑，可以放在其他生命周期，如 componentDidMount 中。

react-router
react-router是react的路由-视图控制库，可以书写边界的声明式路由以控制不同页面的渲染。react-router 本身是一个状态机，根据配置好的路由规则，和输入的 url 路径，通过 match 方法找到对应的组件并进行渲染。
这里写图片描述

这套机制在前端和后端都是相通的，例如在后端，就是下面这样一种实现形式来进行渲染：

app.use(async (ctx, next) => {
match({
location: ctx.originalUrl,
routes
}, callback)
// 渲染完成之后，调用 callback 回调
// 将组件 renderToString 返回前端即可
})
对于前端来说，其实也是处理的上面这些逻辑，不过它被很好的封装在组件中，我们只需要写好声明式的路由，这一切就可以随着 url 的变化自动发生。

redux
redux是react的数据流管理库，他对服务端渲染的支持很简单，就是单一的store和状态可初始化。后端在进行渲染的时候会构建好单一的store，并将构建好的初始状态通过以json格式，通过全局