剧场模式
首页后端ReactReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程

React SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #2 客户端 render vs 服务器端 render

海外散仙厉飞雨 · 化神发布于新课程
0

https://graphql-qiuzhi.herokuapp.com/launch/1

https://nextjs.org/

https://github.com/hfpp2012/hello-apollo

https://www.netlify.com/

https://ruby-china.org/wiki

客户端 render

单页面: 每个页面在客户端 render, 而不是在服务器

- [ ] 提供入口文件 index.html
- [ ] 浏览器解析 html css js img 等静态资源
- [ ] 获得动态数据,是通过 js 发送 API 请求,最后绑定在 DOM 上
- [ ] 页面跳转和导航是靠 history API,并不是真正的浏览器的刷新
- [ ] 要代码分离可以依赖 lazy load 等技术(react code split)
- [ ] 因为全是静态内容,容易用 CDN 来加速

优点:

- [ ] 减少服务器压力
- [ ] 更好的 UI 交互能力
- [ ] 静态内容容易托管和cache
- [ ] 架构良好
- [ ] 团队分工

缺点:

- [ ] 初始首页可能会慢
- [ ] 严重依赖 js ,可能体积大
- [ ] 对 SEO 不友好

服务器端 render

多页面:每个页面在服务器端 render,再发回给浏览器

- [ ] 每次用户打开新页面,都是返回一个 HTML 给浏览器
- [ ] 浏览器加载和解析 CSS 来画这个 UI
- [ ] 浏览器加载和解析 JS 来增强 UI 交互
- [ ] 用户进入新页面都是靠浏览器刷新
- [ ] 浏览器可以 cache 静态资源(css, js img, etc.)
- [ ] 静态资源也是可以用 cdn。

优点:

- [ ] 快速 render 页面
- [ ] 更好的性能
- [ ] SEO 友好

缺点:

- [ ] 服务器端压力可能大
- [ ] 每次请求都要刷新,重复请求资源,有点浪费
- [ ] UI 交互可能不强
1 条回复
加微信(qiuzhi99666)入群订阅号服务号
随机课程
webpack 3 零基础入门视频教程

webpack 3 零基础入门视频教程

14 个视频1 小时 35 分钟入门

全部免费

前端Webpack已完结

课程目录

1FreeReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #1 介绍

FreeReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #2 客户端 render vs 服务器端 render

3FreeReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #3 开始学习 next.js

4ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #4 好用的脚手架工具

5ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #5 在不同的页面跳转

6ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #6 与 material-ui 的结合

7ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #7 与 material-ui 的结合完成小项目 - children 、 layout、useRouter

8ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #8 动态页面

9ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #9 发送请求 part 1

10ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #10 发送请求 part 2

11ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #11 如何部署

12ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #12 实战 - 开始 - react - graphql - apollo

13ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #13 实战 - 如何把一个 graphql - apollo 的项目用 nextjs 来改造

14ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #14 实战 - head 如何用 - 添加静态资源

15ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #15 实战 - _document 如何用 - 添加静态资源

16ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #16 实战 - 完成 apollo 项目

17ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #17 实战 - 如何用 TypeScript 改写 apollo 项目

18ProReact SSR & Next.js & GraphQL & TypeScript 入门与进阶实战视频教程 #18 完结

学员
hanruiying · 道祖sunlee · 金仙chumai1984 · 大乘taleyoung · 元婴xll · 道祖Emperor · 元婴刘浩 · 大乘beibei0829 · 道祖yuhsu1004 · 真仙kongcheng · 金仙fengjingjing-ctrl · 元婴粽子 · 合体guxiaobai · 道祖xijinhua · 元婴熊本大魔王 · 元婴Sir · 元婴yigeqi · 元婴weisuoke · 合体18361082737 · 金仙Sky · 元婴zenkun · 太乙729902288 · 太乙oldwolf · 元婴biguokang · 真仙StringLiu2 · 元婴currymax · 元婴hacker0limbo · 元婴mfkyddh · 金仙世界炎凉 你别善良 · 元婴包国杰 · 元婴allonkwok · 太乙xuezh · 大罗缘 · 元婴MITTY · 太乙lqp336699 · 真仙han1457 · 元婴背着书包闯天下 · 元婴cometjun · 道祖ruiyazhenshuai · 元婴rayay · 道祖netNowork · 大乘湖会冰~ · 元婴liar · 真仙Mr-Fengalang · 合体huangqiangqiang · 元婴gangpu · 元婴supergczh · 道祖
最新动态
hanruiying · 道祖学习到了0:00
sunlee · 金仙学习到了11:45
chumai1984 · 大乘学习到了11:00
taleyoung · 元婴学习到了5:11
xll · 道祖学习到了11:00
统计信息
    学员: 14741
    视频数量: 852
    帖子数量: 421

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:93

Top