概念分析:
服务端渲染(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。
参考资料: