SSR：即服务端渲染(Server Side Render) 传统的服务端渲染可以使用Java，php 等开发语言来实现，随着 Node.js 和相关前端领域技术的不断进步，前端同学也可以基于此完成独立的服务端渲染。
过程：浏览器发送请求 -> 服务器运行 react代码生成页面 -> 服务器返回页面 -> 浏览器下载HTML文档 -> 页面准备就绪 即：当前页面的内容是服务器生成好给到浏览器的。
对应CSR：即客户端渲染(Client Side Render) 过程：浏览器发送请求 -> 服务器返回空白 HTML(HTML里包含一个root节点和js文件) -> 浏览器下载js文件 -> 浏览器运行react代码 -> 页面准备就绪 即：当前页面的内容是js渲染出来
如何区分页面是否服务端渲染： 右键点击 -> 显示网页源代码，如果页面上的内容在HTML文档里，是服务端渲染，否则就是客户端渲染。
对比
CSR：首屏渲染时间长，react代码运行在浏览器，消耗的是浏览器的性能
SSR：首屏渲染时间短，react代码运行在服务器，消耗的是服务器的性能
为什么要用服务端渲染
首屏加载时间优化，由于SSR是直接返回生成好内容的HTML，而普通的CSR是先返回空白的HTML，再由浏览器动态加载JavaScript脚本并渲染好后页面才有内容；所以SSR首屏加载更快、减少白屏的时间、用户体验更好。
SEO (搜索引擎优化)，搜索关键词的时候排名，对大多数搜索引擎，不识别JavaScript 内容，只识别 HTML 内容。 （注：原则上可以不用服务端渲染时最好不用，所以如果只有 SEO 要求，可以用预渲染等技术去替代）
构建一个服务端渲染的项目
(1) 使用 Node.js 作为服务端和客户端的中间层，承担 proxy代理，处理cookie等操作。
(2) hydrate 的使用：在有服务端渲染情况下，使用hydrate代替render，它的作用主要是将相关的事件注水进HTML页面中(即：让React组件的数据随着HTML文档一起传递给浏览器网页)，这样可以保持服务端数据和浏览器端一致，避免闪屏，使第一次加载体验更高效流畅。
ReactDom.hydrate(<App />, document.getElementById('root'));
(3) 服务端代码webpack编译：通常会建一个webpack.server.js文件，除了常规的参数配置外，还需要设置target参数为'node'。
const serverConfig = { target: 'node', entry: './src/server/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, '../dist') }, externals: [nodeExternals()], module: { rules: [{ test: /\.js?$/, loader: 'babel-loader', exclude: [ path.join(__dirname, './node_modules') ] } ... ] } (此处省略样式打包，代码压缩，运行坏境配置等等...) ... };
(4) 使用react-dom/server下的 renderToString方法在服务器上把各种复杂的组件和代码转化成 HTML 字符串返回到浏览器，并在初始请求时发送标记以加快页面加载速度，并允许搜索引擎抓取页面以实现SEO目的。
const render = (store, routes, req, context) => { const content = renderToString(( <Provider store={store}> <StaticRouter location={req.path} context={context}> <div> {renderRoutes(routes)} </div> </StaticRouter> </Provider> )); return ` <html> <head> <title>ssr</title> </head> <body> <div>${content}</div> <script src='https://www.jb51.net/index.js'></script> </body> </html> `; } app.get('*', function (req, res) { ... const html = render(store, routes, req, context); res.send(html); });
与renderToString类似功能的还有： i. renderToStaticMarkup：区别在于renderToStaticMarkup 渲染出的是不带data-reactid的纯HTML，在JavaScript加载完成后因为不认识之前服务端渲染的内容导致重新渲染(可能页面会闪一下)。
ii. renderToNodeStream：将React元素渲染为其初始HTML，返回一个输出HTML字符串的可读流。
iii. renderToStaticNodeStream：与renderToNodeStream此类似，除了这不会创建React在内部使用的额外DOM属性，例如data-reactroot。
(5) 使用redux 承担数据准备，状态维护的职责，通常搭配react-redux, redux-thunk(中间件：发异步请求用到action)使用。（本猿目前使用比较多是就是Redux和Mobx，这里以Redux为例）。 A. 创建store(服务器每次请求都要创建一次，客户端只创建一次):
const reducer = combineReducers({ home: homeReducer, page1: page1Reducer, page2: page2Reducer }); export const getStore = (req) => { return createStore(reducer, applyMiddleware(thunk.withExtraArgument(serverAxios(req)))); } export const getClientStore = () => { return createStore(reducer, window.STATE_FROM_SERVER, applyMiddleware(thunk.withExtraArgument(clientAxios))); }
B. action: 负责把数据从应用传到store，是store数据的唯一来源