本專案 fork 自medux-react-admin，這是一個使用 Medux+React+Antd4+Hooks+Typescript 開發的 WEB 單頁應用，你可以從本專案中看到如何將一個 SinglePage(單頁應用) 快速轉換為支持 SEO 的多頁應用。
專案地址：medux-react-ssr，在線預覽
服務器渲染(Server-Side Rendering)并不是一個復雜的技術，而 服務器渲染 與 服務器同構渲染 則是2個不同的概念，重點在于：同構，要做到一套代碼完美的運行在瀏覽器與服務器之上不是一件簡單的事情，目前業界也沒有特別滿意的方案，都需要或多或少的對不同的環境做差異化處理。
同構渲染的目標與意義
通常同構渲染主要是為了：
- 利于 SEO 搜索引擎收錄
- 加快首屏呈現時間
- 同時擁有單頁(SPA)和多頁路由的用戶體驗
通常同構渲染需要做到：
- 瀏覽器與服務器復用同一套代碼。
- 用戶訪問的第一個頁面(首屏)由服務器渲染輸出，以利于 SEO 和加快呈現速度。
- 首屏由服務器渲染輸出之后，瀏覽器在其基礎上進一步渲染，但不再做重復作業，包括不再重復請求資料。
- 之后用戶訪問的其它頁面都不再經過服務器渲染，以減少服務器壓力和達到單頁(SPA)的用戶體驗。
- 在之后的互動程序中重繪瀏覽器，需要保持當前頁面并重新由服務器渲染，以實作多頁路由的用戶體驗。
同構渲染的難點與金鑰匙
獲取初始化資料：
同構渲染的主要難點在于 Client 端渲染時組件生命周期鉤子承載了太多的職能與副作用，比如：獲取資料、路由、按需加載、模塊化等等，這些邏輯被分散在各個組件中隨著組件的渲染動態執行，而它們的執行又再次引起組件的重新渲染。簡單來說就是：
Render -> Hooks -> Effects -> ReRender -> Hooks -> Effects...
這樣的渲染流程在 Server 端是不行的，因為通常 Sever 端不會 ReRender，因此必須把所有副作用都提前執行，而后在一次性 Render，簡單來說就是：
Effects -> State -> Render
那么解決方案就是將這些副作用盡量的與組件的生命周期鉤子脫離，并引入獨立的狀態管理機制來管理它們，讓 UI 渲染變成簡單純粹的 PrueRender，而這正是@medux 所倡導的狀態驅動理念。
異步按需加載：
在 Client 端渲染時，為了提升加載速度我們通常對代碼進行 chunk 分包、并使用異步按需加載來優化用戶體驗。而在 Server 端渲染時這變得完全沒必要，反而會拖慢加載速度。如何在 server 端中替換異步代碼為同步代碼呢？正好@medux將模塊加載視為一種配置策略，它可以很輕松的讓將模塊加載在同步和異步之間切換。
uj5u.com熱心網友回復：
沒人需要服務器同構渲染的么？
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/40665.html
標籤：JavaScript
上一篇：請教大哥一個日期問題