1. 概念分析:

服务端渲染(SSR)

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

客户端渲染

  • 前后分离,⻚⾯的交互

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

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

2. 架构思路及要点

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

3. 同构关键点

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

1. 路由不同

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

2. 代码的同构

image.png

接下来我们将尝试一步步从零开始实现一个React同构项目Demo。

文章参考:
https://imweb.io/topic/5d2da910b17a4bd24bd0678a
https://www.jianshu.com/p/c98f44026ec6