React server component
参照文档
服务器组件的介绍
react.dev/blog/2020/1…
nextJS的实现
github.com/orgs/vercel…
由来
先看看为什么会有server component
视频里列举了一个常规的父子组件向服务器发送请求的过程，称这个过程为瀑布流的过程，即父组件先请求子组件再请求。
一开始是想解决瀑布流的问题，里面介绍feacebook的一些产品是通过relay + GraphQL来解决这个问题的。
但是并不是所有的产品都有GraphQL后端，或者这个方案并不为所有人接受，所以想要通过server component来解决这个问题：
把组件放到服务端：
可以看到服务器组件的出发点是希望解决这个问题的。后来也带来了很多其他的好处，后面会介绍
随后给出了一个demo让我们直观的感受
地址： github.com/reactjs/ser…
服务端组件简介
通过视频的介绍能帮大家理解服务端组件的带来的好处，先看下如何创建一个服务端组件
- xxx.client.js (客户端组件)
- xxx.server.js (服务端组件)
- xxx.js (通用组件)
带来的第一个好处:向服务器发请求离服务器"更近"了
带来的第二个好处:在服务端用的库可以不打包到前端的代码中
例子：文件头部引用了一些包，比如对时间进行格式化（date-fns）
import {fetch} from 'react-fetch';
import {readFile} from 'react-fs';
import {format} from 'date-fns';
import path from 'path';
服务端组件在格式化好后直接给客户端，date-fns包不会出现在客户端
带来的第三个好处:在服务端的一些业务代码也可以不用给前端
比如：一些权限校验，某些模块在没有权限的用户可以不传给前端
...
等等其他的好处等使用后的心得再总结
再挖个坑，服务端组件到底是生成了什么（JSX）传递给前端组件
和SSR的关系
- SSR是把html给到前端，第一次渲染的时候
- server component不会渲染成html,它会渲染成特殊的格式给到前端，而且react很聪明，能保存客户端的state
缺点
不能实现交互性，即不能使用浏览器的一些API或者react的一些hooks
最后
看完视频大概能了解到nextjs里的说的组件是从服务端流向客户端的，这种改变带来了请求数据时的写法不一样，对组件的治理的思想也不一样，哪些归为服务端组件，哪些归位客户端组件。
这些在后面的开发中慢慢总结。
