SSR-React引用同构

whySSR

基础API

渐进式深入SSR

whySSR

Server-Side Rendering的意义

1. 加快了首屏渲染时间

2. 完整的可索引的 HTML 页面（有利于 SEO)，便于爬虫检索网页内的内容

实现SSR的原理

1. 在node环境下是没有DOM概念的，所以在服务端操作的是阻尼DOM，其实是对真实DOM的一个 JavaScript对象映射的操作

2. 在服务端，将虚拟DOM映射成字符串输出，在客户端又将虚拟DOM映射成真是DOM，实现页面的挂载

基础API

服务端用到的API

renderToString

• 把一段React元素渲染为原始的HTML。

• 如果在一个已经有了服务端渲染标记的节点上调用 ReactDOM.render() ，React将保留该节点，仅作绑定事件处理

renderToStaticMarkup

• 不会创建额外的DOM属性，例如 data-reactid 这些仅在React内部使用的属性

StaticRouter

• context: 上下文，一般初始值未一个空对象，组件可以向对象添加属性以存储有关渲染的信息

• location: 前端请求的url string | { pathname, search, hash, state }

• basename: 所有位置的基本URL

按需加载

• react-loadable的使用

客户端用到的API

hydrate(element, container[, callback])

• React会将服务端渲染的标记加载，并将尝试将事件侦听器附加到现有标记

  • React期望服务器和客户端之间呈现的内容完全相同

  • 如果服务器和客户端之间的单个元素的属性或文本内容不可避免地不同（例如，时间戳），则可以通过添加suppressHydrationWarning={true}到元素来解除警告

  • 要在服务器和客户端上呈现不同的内容，则可以执行两次渲染。这使得不同的客户端上的一些组件可以读取的状态变量一样this.state.isClient，您可以设置为true在componentDidMount()，会使组件变慢，因为它们必须渲染两次

渐进式深入SSR

1. 基本设置

2. Router

3. Redux

4. fetch Data

5. 结合react-loadable拆分代码

参考

1. 看起来最适合我的项目参考

2. 电影项目

3. 采坑记录

4. 这个最贴切

5. 这个可参考