Hulu基于React的框架演进.pdf

1、Hulu基于React的框架演进关于Hulu目录Hulu网站技术背景和挑战自创基于React的框架应用react-server的教训迁移至next.js的历程总结Hulu网站技术背景和挑战自创基于React的框架应用react-server的教训迁移至next.js的历程总结历史遗留技术栈多个Web应用共同存在BrowseAccountSignup.需要一个框架！框架提供支持BrowseAccountSignup框架框架框架也要施加约束BrowseAccountSignup框架的要求支持多应用施加约束统一的UI库如何选择UI库是否选择同构？CSR服务器产生HTML下载JavaScriptRea

2、ct渲染网页可交互SSR服务器产生HTML下载JavaScriptReact渲染网页可交互Hulu网站技术背景和挑战自创基于React的框架应用react-server的教训迁移至next.js的历程总结网页Node.js网页Node.jsAPI网页Node.jsAPIData网页Node.jsAPIData网页Node.jsAPIData网页Node.jsAPIData网页Node.jsAPIDataHTML+脱水数据脱水和注水网页ANode.jsAPIData如何在SPA中实现同构？网页BHTML+脱水数据纯数据SPA跳转Hulu网站技术背景和挑战自创基于React的框架应用react-s

3、erver的教训迁移至next.js的历程总结增量式渲染HeaderMastheadTraysReact Server增量式向浏览器推送渲染的每部分React-Server Page利用Promise管理数据Page和React无关RootElement可以被增量渲染网页Node.jsAPIDataHTMLHTML+API req/res pair仅req/res pari中无缓存才直接访问APIReact Server的同构使用React Server的教训浏览器服务器必须访问同一个API端口难以定制API生命周期和页面生命周期相同Hulu网站技术背景和挑战自创基于React的框架应用rea

4、ct-server的教训迁移至next.js的历程总结组件的两个生命周期Page Componentasync get propspropsNext.js PagePage就是React组件getInitialProps用于获取外部数据数据以props形式传递HoCPage=HoC+Enhanced PageThe Fold第一页服务器端渲染单页应用跳转浏览器端渲染永远浏览器端渲染SSR的理想实现NoSSRThe Fold用NoSSR包裹NoSSR保持和React一致风格组件不需要关心自身是CSR还是SSR迁移至Next.js尽量保持对应用层接口的一致保持两条平行branch开发特定功能允许不同的设计Hulu网站技术背景和挑战自创基于React的框架应用react-server的教训迁移至next.js的历程总结React组件模型是一种交流方式构建框架的原则框架必须施加约束框架必须提供灵活度没有完美的框架，持续改进谢谢