一起了解基于React的服务端渲染&同构

这是我参与更文挑战的第14天，活动详情查看 更文挑战

概念分析：

服务端渲染（SSR）

• 更好的⾸屏性能
• 更利于 SEO，爬虫可以直接抓取已渲染的内容

客户端渲染

• 前后分离，⻚⾯的交互

同构：服务端和客户端都可以运⾏的同⼀套代码

• 同一套代码，复用率，可维护性增强
• 同时具有SSR与前后端分离的优势，利于 SEO 优化
• 更好的性能与更好的用户体验

架构思路及要点

React提供了服务器渲染的各种API，可快速满足同构需求。 同一份代码要在服务端与客户端各执行一次，首屏加载完服务端渲染的页面后，客户端紧接着继续执行并重新渲染页面，接管后续的页面交互。

同构关键点

所谓同一份代码同时运行服务端和客户端，其实可复用的基本为组件，服务端与客户端的差异无法完全被抹平，而React的好处就是对服务端构建提供了不少解决方案。

1. 路由不同

客户端使用：<BrowserRouter /> 服务端使用：<StaticRouter />

2. 代码的同构

ReactDOMServer.renderToString(element);
官方文档：
https://reactjs.org/docs/react-dom-server.html#rendertostring
源码分析：
https://github.com/facebook/react/blob/master/packages/react-dom/src/server/ReactDOMStringRenderer.js

ReactDOM.hydrate, 同全完法用 ReactDOM.render

总结：

• 双端路由怎么工作

具体看代码，路由两端分开维护

• 数据同构

数据部分使用redux来互通

• 渲染同构

代码部分同构使用react

SSR架构图

以上对基于React的同构方案进行了简单的介绍以及要点梳理，希望对你有帮助。

感兴趣的童鞋可以尝试一步步从零开始实现一个React同构项目Demo。

参考资料：

imweb.io/topic/5d2da… 腾讯IMWEB团队