download:React服务器渲染原理解析与实践
**
本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节上的处理和问题的排查。帮助同学们彻底理解深入理解服务器端渲染及底层实现原理,课程学习完成,大家可以搭建属于自己的SSR工程架构。
**
**
适合人群
需要有一定的React项目经验, 想要提升自己
进军中高级工程行业的前端开发人员
建议您先从《React16.4开发简书项目 从零基础入门到实战》
这门课程开始学习,以便更好的学习本门课程。
技术储备要求
Node端基础知识,对Express框架有使用经验。对React和Redux至少有
半年以上使用经验。能够比较熟练的使用Webpack基础配置,如loader
相关内容。有至少一个前后端分离项目的开发经验。
**
第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問題的新思緒
本课程已結束