React 伺服器渲染原理解析與實踐

第1章 伺服器端渲染基礎
本章主要講解客戶端與伺服器端渲染的概念，分析客戶端渲染和伺服器端渲染的利弊，帶大家對伺服器端渲染有一個粗淺認識。

1-1 課程導學
1-2 什麼是伺服器端渲染
1-3 什麼是客戶端渲染
1-4 React 客戶端渲染的優勢與弊端


第2章 React中的伺服器端渲染
本章將藉助Node.js，Webpack等工具的幫助，帶大家實現一個非常基礎的基於React.js技術棧的伺服器端渲染模型，過程中還會講解虛擬DOM與伺服器端渲染的內在聯繫。

2-1 在伺服器端編寫 React 組件
2-2 伺服器端 Webpack 的配置
2-3 實現伺服器端組件渲染
2-4 建立在虛擬DOM上的伺服器端渲染
2-5 Webpack 的自動打包與伺服器自動重啟
2-6 使用 npm-run-all 提升開發效率

第3章 同構的概念的梳理
伺服器端渲染與同構的概念實際上並不完全一致，React中的SSR實際上指的是同構技術，那麼什麼是同構技術，它和伺服器端渲染的關係是什麼，React中如何實現同構呢？這一章節將給大家詳細講解。

3-1 什麼是同構
3-2 在瀏覽器上執行一段 JS 代碼
3-3 讓 React 代碼在瀏覽器上運行
3-4 工程代碼優化整理
3-5 階段總結

第4章 在SSR框架中引入路由機制
本章將給大家講解如何在當前的SSR框架中引入React-Router，從而使得我們的伺服器端渲染框架能夠支持路由跳轉，SSR的路由跳轉比前端路由或後端路由都要複雜一些，這張我們將細緻的講解整個SSR路由的執行流程。

4-1 伺服器端渲染中的路由
4-2 多頁面路由跳轉
4-3 使用Link標簽串聯起整個路由流程

第5章 SSR框架與Redux的結合
本章將講解如何將Redux數據管理框架與SSR框架做結合，使SSR框架能夠支撐複雜業務的開發。在這一章節中，我們將詳細講解伺服器端非同步數據獲取的流程和方法，同時也給大家講解清楚什麼是同構中的數據脫水與註水。

5-1 我們常常聽說的中間層是什麼？
5-2 同構項目中引入 Redux
5-3 創建 Store 代碼的復用
5-4 構建 Redux 代碼結構 ( 1 )
5-5 構建Redux代碼結構(2)
5-6 如何獲取最新的secret值
5-7 流程回顧及問題分析
5-8 非同步數據伺服器渲染： loadData方法及路由重構
5-9 Favicon 及多級路由問題的處理
5-10 伺服器端渲染獲取數據
5-11 數據的脫水和註水

第6章 使用Node作為數據獲取中間層
本章將講解真正伺服器端渲染中的代碼架構體系，Node.js如何在這個體系中充當中間層的作用，這裡面我們將詳細講解數據代理轉發，cookie登陸狀態傳遞，axios實例等概念。

6-1 使用proxy代理，讓中間層承擔數據獲取職責
6-2 伺服器端請求和客戶端請求的不同處理
6-3 axios中instance的使用
6-4 redux-thunk中的withExtraArgument
6-5 renderRoutes 方法實現對多級路由的支持
6-6 登陸功能的製作
6-7 登陸介面打通
6-8 登陸狀態切換
6-9 解決登陸 cookie 傳遞問題
6-10 翻譯列表頁面製作

第7章 細節問題處理
本章將講解在SSR框架中，如何處理301重定向，404頁面不存在的情況，以及面對非同步數據獲取失敗的情況，應該如何藉助Promise解決問題。

7-1 secret統一管理
7-2 藉助 context 實現404頁面功能
7-3 實現伺服器端301重定向
7-4 數據請求失敗情況下 promise 的處理


第8章 處理SSR框架中的CSS樣式
本章將講解在SSR框架中，組件和頁面中CSS樣式的處理方案，在這章中，我們還會應用高階組件等設計技巧，提高代碼復用性。

8-1 如何支持 CSS 樣式修飾
8-2 如何實現CSS樣式的伺服器端渲染
8-3 多組件中的樣式如何整合
8-4 LoadData 方法潛在問題的修正
8-5 使用高階組件精簡代碼
8-6 列表樣式優化

第9章 SEO技巧的融入
本章將講解SEO中的一些基本技巧，以及如何通過React-helmet等技術，提升當前SSR框架的SEO效果，最後，還會給大家講解SSR外的另一種解決SEO問題的思路：預渲染。

9-1 什麼是SEO， 為什麼伺服器端渲染對SEO更加友好 ？
9-2 Title 和 Description的真正作用
9-3 如何做好 SEO
9-4 React-Helmet 的使用
9-5 課程總結
9-6 使用預渲染解決SEO問題的新思路

下載地址：百度網盤