1. 程式人生 > >React 伺服器渲染原理解析與實踐資源

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問題的新思路下載地址:

百度網盤