SSR
什么是服务端渲染（SSR）？
服务端渲染是指在服务器上生成HTML页面，然后将这些页面发送到客户端。这种方法可以加快首屏加载时间，改善SEO（搜索引擎优化），并且对于一些需要快速响应的应用场景非常有用。
style 处理
1)使用style对象的_getCss获取组件样式源代码并保存在context上
2)服务端打包使用isomorphic-style-loader插件将s样式插入到html中
hydrated
在React中，hydrate 函数是一个用于将服务端渲染（SSR）的内容与客户端React组件进行连接的过程。这个过程通常在React 16及更高版本中使用，特别是在使用像ReactDOMServer这样的库进行服务器端渲染时非常有用。
React的hydrate原理
在React中，当你使用服务端渲染生成HTML，并将其发送到客户端时，客户端的React应用需要“hydrate”这些静态的HTML。这意味着React组件需要接管这些已经存在的DOM元素，并将其转换为动态的React组件。
步骤说明：
- 服务器渲染：服务器使用
ReactDOMServer.renderToString或ReactDOMServer.renderToStaticMarkup方法生成HTML。 - 发送到客户端：生成的HTML发送到客户端浏览器。
- 客户端hydrate：在客户端，React使用
ReactDOM.hydrate函数来附加事件监听器到这些静态的HTML元素上。这样，当用户与页面交互时（例如点击按钮），React能够像在单页应用（SPA）中那样响应这些事件。
示例代码：
服务器端（Node.js） ：
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App'; // 你的React组件
const html = ReactDOMServer.renderToString(<App />);
客户端：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // 你的React组件
ReactDOM.hydrate(<App />, document.getElementById('root'));
为什么使用hydrate？
- 性能：由于DOM已经由服务器预先构建，因此客户端只需要“附加”事件监听器即可，这比从头开始构建DOM要快得多。
- 用户体验：由于首屏内容几乎是即时的（因为大部分工作已经在服务器上完成），用户可以更快地看到内容，从而提高用户体验。
- SEO：搜索引擎可以直接抓取渲染好的HTML，这对于SEO非常有利。
注意事项
- 确保服务器生成的HTML与客户端的React代码完全一致，包括所有的props和state。任何细微的差异都可能导致hydration失败。
- 使用
hydrate而不是render来避免不必要的警告和潜在的问题。hydrate是专门为SSR设计的。
通过这种方式，React能够在保持快速首屏加载和良好用户体验的同时，利用服务端渲染的优势。
