服务端渲染 SSR

1. 服务端渲染： HTML + CSS +JS +Data => 渲染后的 HTML
2. 服务端：
   1. 所有模板等资源都存储在服务器
   2. 内网机器拉取数据更快
   3. 一个 HTML 返回所有数据

浏览器和服务器交互流程

	客户端渲染	服务端渲染
请求	多个请求（HTML,数据等）	一个请求
加载过程	HTML&数据串行加载	1个请求返回 HTML&数据
渲染	前端渲染	服务端渲染
可交互	图片等静态资源加载完成， JS 逻辑执行完成可交互	图片等静态资源加载完成， JS 逻辑执行完成可交互

总结：服务端渲染（SSR）的核心是减少请求

SSR 的优势：

1. 减少白屏时间
2. 对于 SEO 友好

SSR 代码实现思路：

服务端：

1. 使用 react-dom/server 的 renderToString 方法将 React 组件渲染成字符串
2. 服务端路由返回对应的模板 客户端：
3. 打包出针对服务端的组件

转成字符串，渲染到 HTML 中

webpack SSR 打包存在的问题 浏览器的全局变量（Node.js 中没有 document，window）

1. 组件适配：将不兼容的组件根据打包环境进行适配
2. 请求适配：将 fetch 或者 ajax 发送请求的写法改成 isomeorphic-fetch 或者 axios

样式问题（Node.js 无法解析 css） 方案一：服务端打包通过 ignore-loader 忽略调 CSS 的解析 方案二：将 style-loader 替换成 isomeorphic-style-loader

解决样式不显示

1. 使用打包出来的浏览器端 html 模板
2. 设置占位符，动态插入组件