ITSOURCE论坛

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

原价699元的终身金牌VIP,现在只需199元,需要请联系客服。
查看: 193|回复: 14

React 服务器渲染原理解析与实践(从零开始,带你搭建属于自己的React SSR框架)

[复制链接]

263

主题

266

帖子

3万

积分

版主

Rank: 7Rank: 7Rank: 7

积分
36651
发表于 2019-3-1 22:28:53 | 显示全部楼层 |阅读模式
  • 第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问题的新思路





游客,本付费内容需要支付 130学币 才能浏览支付


学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

1

主题

96

帖子

458

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
458
发表于 2019-3-5 11:48:58 | 显示全部楼层
我看不错噢 谢谢楼主!ITSOURCE论坛越来越好!
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

1

主题

45

帖子

75

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
75
发表于 2019-3-5 23:12:51 | 显示全部楼层
这个帖子不回对不起自己!我想我是一天也不能离开ITSOURCE论坛了。
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

1

主题

33

帖子

227

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
227
发表于 2019-3-14 14:57:06 | 显示全部楼层
这个帖子不回对不起自己!我想我是一天也不能离开ITSOURCE论坛了。
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

0

主题

21

帖子

111

积分

钻石VIP

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

积分
111
发表于 2019-3-16 12:17:41 | 显示全部楼层
楼主发贴辛苦了,谢谢楼主分享!我觉得ITSOURCE论坛是注册对了!
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

0

主题

43

帖子

73

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
73
发表于 2019-3-17 16:19:05 | 显示全部楼层
很棒的资源,感谢分享
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

1

主题

55

帖子

63

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
63
发表于 2019-3-18 13:27:31 | 显示全部楼层
楼主太厉害了!楼主,I*老*虎*U!我觉得ITSOURCE论坛真是个好地方!
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

0

主题

11

帖子

61

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
61
发表于 2019-3-19 09:23:17 | 显示全部楼层
这个帖子不回对不起自己!我想我是一天也不能离开ITSOURCE论坛了。
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

1

主题

269

帖子

321

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
321
发表于 2019-3-23 20:12:50 | 显示全部楼层
这东西我收了!谢谢楼主!ITSOURCE论坛真好!
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

1

主题

147

帖子

553

积分

金牌VIP

Rank: 14Rank: 14Rank: 14Rank: 14

积分
553
发表于 2019-4-18 11:00:17 | 显示全部楼层
这东西我收了!谢谢楼主!ITSOURCE论坛真好!
学币不足时请充值:  开通VIP全站课程免学币下载:  授权码请联系QQ:1430004367
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|联系QQ:1430004367|ITSOURCE论坛 ( 皖ICP备17010824号 )

GMT+8, 2019-7-23 10:32 , Processed in 0.425678 second(s), 37 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表