组件即函数和Serverless SSR实践
如果无法正常显示,请先停止浏览器的去广告插件。
1.
2. 「前端新思路」 组件即函数和Serverless SSR实践
By 狼叔
3.
4. 狼SHU的故事
5.
6. 今日之Node
会用
高可用
调优
吾之蜜糖,彼之毒药,这才是Serverless背景下前端的机会
7. 目录
1. 优酷C端架构演进
2.「组件即函数」SSR实现原理和规范
3. 实践落地、性能和未来思考
8. 1、「优酷」C端架构演进
9. 播放页模块划分
10. Bigpipe
11. Why React SSR
同构开发
https://github.com/ykfe/egg-react-ssr
12. 从BFF到SFF
13. SFF前后端分工
14. Serverless下渲染层
15.
16. SSR概念升级
17. 2、「组件即函数」SSR实现原理和规范
18. Client-side rendering
19. Server-side rendering
hydrate
Node
server.bundle.js
浏览器加载client.bundle.js,
Hydrate
绑定事件
20. Next.js
hydrate
21. CSR 和 SSR能融合么?
核心是请求约定为getInitialProps
通过高阶组件包一下
22. 同构思考
23. FaaS和 SSR能融合么?
24. 路由配置
25. 架构升级(4阶段)
一
切
都
是
函
数
26. CaaF =
• 视图+Ajax=CSR
• API
as a function
页面即服务
• 视图+API(Node)=SSR
页面即函数
• API开发简化
• NoOPS
• 面向组件开发
组件即函数
27.
28. Bigpipe
29.
30. Bigpipe
31. 3、「实践」落地实践、性能和未来思考
32. Umi SSR
Time to First Byte
33. 文件大小说明
34. 无缝切换CSR和SSR
35. 容灾打底方案
36. 性能与VNode
37. 后端接口字段优化
38. 性能对比
39. 可做的点
我们还能做些什么?
40.
41. Bigpipe
42. Bigpipe
43. Bigpipe
44. Bigpipe
45. Q&A
THANK YOU!
少抱怨,多思考,未来更美好