whySSR
基础API
渐进式深入SSR
whySSR
Server-Side Rendering的意义
加快了首屏渲染时间
完整的可索引的 HTML 页面（有利于 SEO)，便于爬虫检索网页内的内容
实现SSR的原理
在node环境下是没有DOM概念的，所以在服务端操作的是阻尼DOM，其实是对真实DOM的一个 JavaScript对象映射的操作
在服务端，将虚拟DOM映射成字符串输出，在客户端又将虚拟DOM映射成真是DOM，实现页面的挂载
基础API
服务端用到的API
renderToString
把一段React元素渲染为原始的HTML。
如果在一个已经有了服务端渲染标记的节点上调用 ReactDOM.render() ，React将保留该节点，仅作绑定事件处理
renderToStaticMarkup
- 不会创建额外的DOM属性，例如 data-reactid 这些仅在React内部使用的属性
StaticRouter
context: 上下文，一般初始值未一个空对象，组件可以向对象添加属性以存储有关渲染的信息location: 前端请求的urlstring | { pathname, search, hash, state }basename: 所有位置的基本URL
按需加载
-
react-loadable的使用
客户端用到的API
hydrate(element, container[, callback])
-
React会将服务端渲染的标记加载，并将尝试将事件侦听器附加到现有标记
React期望服务器和客户端之间呈现的内容完全相同
如果服务器和客户端之间的单个元素的属性或文本内容不可避免地不同（例如，时间戳），则可以通过添加suppressHydrationWarning={true}到元素来解除警告
要在服务器和客户端上呈现不同的内容，则可以执行两次渲染。这使得不同的客户端上的一些组件可以读取的状态变量一样this.state.isClient，您可以设置为true在componentDidMount()，会使组件变慢，因为它们必须渲染两次
渐进式深入SSR
基本设置
Router
Redux
fetch Data
结合react-loadable拆分代码
