欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React 服务器渲染原理解析与实践

程序员文章站 2022-06-29 12:50:08
第1章 服务器端渲染基础本章主要讲解客户端与服务器端渲染的概念,分析客户端渲染和服务器端渲染的利弊,带大家对服务器端渲染有一个粗浅认识。1-1 课程导学1-2 什么是服务器端渲染1-3 什么是客户端渲染1-4 React 客户端渲染的优势与弊端第2章 React中的服务器端渲染本章将借助Node.j ......

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问题的新思路

 

下载地址: