SSR

CSR（Client-Side-Rendering，客户器端渲染）
SSR（Server-Side-Rendering，服务器端渲染）

同构：前后端都可以使用同一套代码生成页面，页面既可以由前端动态生成，又可以由服务器直接渲染出来

用一个现实生活的例子来看：假如从超市买东西吃，以SSR的角度来看，你每次在超市买完随即吃完再走，每次饿了都需要出发去超市。而从CSR的角度来看，就是你从超市购买许多原材料再拿回家去自己煮，多了能放冰箱，这样每次肚子饿了就不需要每次都往超市跑，唯一麻烦一点在于你得花时间挑选食材。

简而言之，SSR强在首屏渲染；而CSR强在用户和页面多交互的场景

image.png image.png image.png

简单的react ssr
react-dom提供了server的渲染api--renderToString，负责把react组件解析成html (这里比vue ssr多了一个环节，因为node是不支持jsx的，所以需要babel支持)
注：a.针对服务端的渲染代码，可以剔除node_modules，大幅减少服务端代码生成耗时; b.使用babel-loader，在node层解析jsx。

react store -- redux/mobx/diva
纯函数：返回结果只依赖传入参数，不受外部影响

异步数据
client: didMount -> axios
server: 数据 -> 初始化store

组件中的异步数据如何在服务端首屏中加载出来：
compoment -> didMount(访问数据库) -> store ->props

一个页面多个组件组成，一个组件请求报错，如何单独处理？
Promise.all有问题？
-> 1.promise包装，在catch里仍然resolve --> (进行降级处理)
-> 2.Promise.allSettled

如何取消浏览器跨域访问数据，使所有数据都从服务端ssr那边请求？
统一axios
!!!! http-proxy-middleware

解决favicon.ico问题?在public目录下放favicon.ico

同构css--解决node层使用document进行css操作
npm install isomorphic-style-loader --save-dev

！！！ssr造成服务端压力过大？-->降级渲染
路由参数，全局配置开关开启csr，请求接口的报错，cpu或者内存占用率提升--> 开启csr

课程坑：
18-- import { createProxyMiddleware } from 'http-proxy-middleware'
25 -- css-loader 需要降级1.0.1，不然styles._getCss()打印出来是[object module]

ssr 两种实现
1.同构 -- server
js--renderToString
css-isomorphic-style-loader
loadData
首页异步请求，处理promise.all报错
放弃seo的降级渲染(流量大)--csrRender() - index.spa.html;
高阶组件，css细节优化withStyle--hoist-non-react-statics
2.其他ssr实现，NodeServer 设置 --- puppeteer

prerender
next.js

zy：使用next.js+antd+redux 实现类似https://e.xitu.io
1.查看网页使用的接口（用掘金的接口即可）
2.支持左侧掘金热文，右侧github trending
3.支持切换（前端后端等）