C端服務(wù)端渲染和性能優(yōu)化方案

1、React SSR的C端實踐C端服務(wù)端渲染和性能優(yōu)化方案狼叔和狼書的故事今天的前端目錄1、為什么要上SSR？2、從CSR到SSR演進(jìn)之路3、API與模塊拆分4、優(yōu)化實踐1、為什么要上SSR？背景：改版而起為什么要上SSR？運維 很差前端 事多API超多能做的更多，想做的更多前端痛點有限資源做事三大場景和六種組合SSRReactAPI1. React：現(xiàn)有中后臺開發(fā)模式2. Api： 只做Api聚合，內(nèi)置配置、緩存、rpc等3. Api + SSR：對于c端，將接口中間層和ssr放到一起4. Api + React：典型的BFF模式5. Api + SSR + React：全棧模式6. SSR

2、+ React：已有項目快速提升性能，尤其是對toB的項目非常有幫助前端能否承擔(dān)全部的端側(cè)應(yīng)用開發(fā)？能不能更簡單？既要也要還要無服務(wù) NoOPS函數(shù)粒度降低構(gòu)建復(fù)雜度擁抱變化今年重點工作收回npm包youku和tudou包名 今年會做些開源項目2、從CSR到SSR的演進(jìn)之路很古老的bigpipe分塊編碼(Transfer-Encoding: chunked)性能基礎(chǔ)2.1、Client-Side Rendering (CSR)所有邏輯，數(shù)據(jù)獲取，模板編譯，路由等都是在瀏覽器做的CSR最佳實踐和問題dynamic importsumi vs cra2.2、預(yù)渲染(Prerending)jsx編譯

3、成html模板+webpack stats布局SPA靜態(tài)頁面Lazy load（可選）Jekyll/Hexo/Gatsby/Next.js/Vuepress2.3、React SSR模板 + 數(shù)據(jù) = HTMLbundle.js布局CSRNode獲取數(shù)據(jù)Ajax獲取數(shù)據(jù)2.3.1、常規(guī)SSR布局，首屏渲染，seo加載bundle.js，hydrate綁定事件渲染方式1：renderToString渲染方式2：renderToNodeStream核心原理有render的地方大都可以用緩存前端資源獲取的數(shù)據(jù)編譯結(jié)果Next.js特性SSRStatic ExportingCSS-in-JS在scr/

4、pages/*.js都是遵守 文件名即path的做法。內(nèi) 部使用react-router封裝。在執(zhí)行過程中-loadGetInitialProps()， 獲得執(zhí)行g(shù)etInitialProps 靜態(tài)方法的返回值props- 將props傳給src/pages/*.js里標(biāo)準(zhǔn)react組件的propsUmi SSR方案1：頁面級別類似于Next模式loadGetInitialProps()執(zhí)行獲得執(zhí)行g(shù)etInitialProps 賦值給組件的props方案2：組件級別bigpipe方式組件寫法同nextloadGetInitialProps()執(zhí)行獲得執(zhí)行g(shù)etInitialProps 賦值給

5、組件的props2.3.2、擴(kuò)展SSR常規(guī)SSR，只處理了一個Stream通過bigpipe，組合多個StreamCSR 和 SSR能融合么？核心是請求約定為getInitialProps通過高階組件包一下同構(gòu)思考Faas和 SSR能融合么？Aws lambda完美兼容faas runtime構(gòu)建or直接用Serverless Server-Side Rendering當(dāng)前端更純粹視圖+Ajax=CSR API視圖+API（Node）=SSRAPI開發(fā)簡化 NoOPS面向組件開發(fā)CasF =as function頁面即服務(wù)頁面即函數(shù)3、API與模塊拆分你會的越多，解決問題越容易產(chǎn)品需要應(yīng)變，后

6、端不好變，前端更容易后端討厭（應(yīng)付）前端，幾種api都懶得根據(jù)ui/ue去定 制，能偷懶就偷懶一個頁面的Api非常多跨域(Jsonp?)Api返回的數(shù)據(jù)對前端不友好需求決定Api，Api不一定給的及時API問題常見做法：BFFSSR里API與模塊拆分每個模塊是一個APIlayout main others拆還是合？同步還是異步?jīng)]有對錯，只是看哪種場景更合適。最重要的是手里有選擇權(quán)頁面即服務(wù)函數(shù)即API1.可靠性：99.999999999%2.可用性：99.99%-無限存儲空間-按量付費4、優(yōu)化實踐QPS提升和性能排查Node沒問題Node + SSR怎么會有問題？編譯 vs緩存優(yōu)化過程性能調(diào)優(yōu)基本知識和工具火焰圖0 x非常簡單，已經(jīng)收入到/這個里面