ssr同構(gòu)應(yīng)用：一般也稱為服務(wù)端渲染，叫同構(gòu)應(yīng)用可能更合適。服務(wù)器只做首次渲染文判，然后交給客戶端，客戶端接管頁面交互
一室梅、客戶端渲染：
原理：
利用react、vue開發(fā)網(wǎng)頁應(yīng)用疚宇，用戶在第一次請求服務(wù)器時亡鼠，服務(wù)器返回的是一個空的html；瀏覽器拿到空的html后再從服務(wù)器拉取css文件敷待，js文件间涵，并獲取api數(shù)據(jù)；
獲取到的css榜揖，js文件存在于本地勾哩，用戶瀏覽頁面，在頁面之間切換時举哟，瀏覽器會利用緩存文件思劳，直接渲染，不走服務(wù)端路由妨猩，只是從服務(wù)端獲取api數(shù)據(jù)潜叛。
優(yōu)點：
1、客戶端直接渲染壶硅，速度快威兜。
2、服務(wù)端不用每次返回html庐椒，只返回api數(shù)據(jù)椒舵，服務(wù)器壓力小。
缺點：
1约谈、不利于seo笔宿。搜索引擎爬蟲對html的解析較好，較難爬取js動態(tài)生成的內(nèi)容窗宇。而react應(yīng)用的html只是一個空架子措伐，所有內(nèi)容都是通過js動態(tài)渲染的。
2军俊、首次加載白屏侥加。用戶在第一次請求服務(wù)器時，先拿html粪躬，然后解析html担败，再去拉css昔穴，js，在網(wǎng)絡(luò)不好的情況下提前，整個過程可能會比較長吗货，用戶會看到白屏。
二狈网、服務(wù)端渲染：
原理：
用戶瀏覽頁面宙搬，在頁面之間切換時，服務(wù)端對每個頁面輸出帶有內(nèi)容的html拓哺，用戶每次請求都需要經(jīng)過服務(wù)器勇垛。
優(yōu)點：
1、首屏加載快士鸥。
2闲孤、利于seo。
缺點：
1烤礁、服務(wù)器壓力大讼积，每次請求都經(jīng)過服務(wù)器，服務(wù)器每次都要解析準(zhǔn)備好這次要請求的html
2脚仔、只是首屏加載快勤众，對用戶已經(jīng)看過的頁面沒有優(yōu)勢。
三玻侥、ssr同構(gòu)應(yīng)用（服務(wù)端渲染的一種）
原理：
用戶首次訪問服務(wù)器决摧，服務(wù)器將帶有內(nèi)容的html返回，瀏覽器解析html凑兰，拉取css,js資源掌桩，拉取完資源后，轉(zhuǎn)換成客戶端渲染模式姑食。
優(yōu)點：利于seo波岛，加載快，結(jié)合了服務(wù)端渲染和客戶端渲染的優(yōu)勢音半。
缺點：技術(shù)較為復(fù)雜则拷。
四、ssr同構(gòu)應(yīng)用的實現(xiàn)：
? 1曹鸠、直接運用react社區(qū)的next.js框架進行開發(fā)
寫法與react有一些區(qū)別煌茬，較適合新項目的開發(fā)。對于已有的react項目彻桃，改造量還是較大的坛善。next.js對每個頁面都做成了服務(wù)端渲染，比較耗服務(wù)端性能，也沒必要眠屎。
2剔交、通過react服務(wù)端渲染庫，結(jié)合node搭建服務(wù)器改衩。
在理順同構(gòu)應(yīng)用的流程后岖常，實現(xiàn)對已有react項目的快速改造，改造量小葫督〗甙埃可以實現(xiàn)對部分頁面的seo。
這種方式可以兼顧開發(fā)效率和改造的靈活性橄镜，優(yōu)勢最為明顯笼蛛。
因此，我選擇第2種方式實現(xiàn)ssr同構(gòu)應(yīng)用蛉鹿。
總結(jié)：
? ? ?總體來說，頁面的渲染性能往湿，客戶端渲染優(yōu)于服務(wù)端渲染妖异。因此我們只需要解決客戶端渲染的兩個缺點即可：不利于seo和首次加載慢。之所以有這兩個缺點领追，原因在于react他膳、vue應(yīng)用的原始html頁面是一個空架子，從空架子到內(nèi)容加載出來需要時間绒窑，對搜索引擎爬蟲棕孙，也爬不到任何內(nèi)容。
? ? 如果我們能在用戶首次訪問服務(wù)器時些膨，返回帶有內(nèi)容的html蟀俊，這兩個缺點就迎刃而解；這也是同構(gòu)應(yīng)用的目的所在订雾。
