CSR(Client-Side-Rendering,客户器端渲染)
SSR(Server-Side-Rendering,服务器端渲染)
同构:前后端都可以使用同一套代码生成页面,页面既可以由前端动态生成,又可以由服务器直接渲染出来
用一个现实生活的例子来看:假如从超市买东西吃,以SSR的角度来看,你每次在超市买完随即吃完再走,每次饿了都需要出发去超市。而从CSR的角度来看,就是你从超市购买许多原材料再拿回家去自己煮,多了能放冰箱,这样每次肚子饿了就不需要每次都往超市跑,唯一麻烦一点在于你得花时间挑选食材。
简而言之,SSR强在首屏渲染;而CSR强在用户和页面多交互的场景
简单的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.支持切换(前端后端等)