剧场模式
首页后端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 条回复
小程序(beta)
课程目录

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 完结

学员
yigeqi · 真仙weisuoke · 金仙后期18361082737 · 太乙巅峰Sky · 真仙zenkun · 大罗729902288 · 大罗oldwolf · 真仙biguokang · 太乙玉仙StringLiu2 · 真仙currymax · 真仙hacker0limbo · 真仙mfkyddh · 金仙后期世界炎凉 你别善良 · 真仙包国杰 · 真仙beibei0829 · 道祖allonkwok · 大罗xuezh · 大罗巅峰缘 · 真仙MITTY · 大罗lqp336699 · 金仙后期han1457 · 真仙背着书包闯天下 · 真仙cometjun · 道祖ruiyazhenshuai · 真仙rayay · 道祖netNowork · 金仙巅峰湖会冰~ · 真仙liar · 太乙玉仙Mr-Fengalang · 金仙后期huangqiangqiang · 真仙gangpu · 真仙supergczh · 道祖
最新动态
yigeqi · 真仙学习到了3:30
weisuoke · 金仙后期学习到了0:00
18361082737 · 太乙巅峰学习到了11:00
Sky · 真仙学习到了2:29
zenkun · 大罗学习到了0:00

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

Top