【Next.js】渲染Client Component 使用客户端组件渲染的优势交互性：可以用 State、 effe

交互性：可以用 State、 effects、 event listeners
浏览器 API：比如 geolocation 、localStorage
使用 React hooks，如 useEffect 、useState 等。在 Next.js 13 中，app 下面默认都是服务端组件，但是在实际开发中，总是会碰到使用 useEffect 等hooks，以及处理交互逻辑，如点击事件、表单提交、状态管理等，这些情况就需要添加 use client标记是 Client Component

client component 通常在代码中添加 use client ，如果有其他模块导入这个文件，那么子组件也是 client component ， /app 下面基本都是服务端器组件

全页面加载就是首次访问或者浏览器刷新加载

1、React 将服务端组件渲染为一种特殊的数据格式，称为 React Server Component Payload（RSC Payload），其中包含对 Client Component 的引用

2、Next.js 使用 RSC Payload 和 Client Component JS 指令在服务器路由上为路由渲染 HTML

然后在客户端：

1、HTML 用于立即显示路由的非交互初始预览

2、RSC Payload 用于 reconcile 客户端和服务端组建数，并且更新 DOM

3、JS 指令用来 hydeate 客户端并且使其具有交互性

Client Component 完全在服务端渲染

Server Component

数据获取：可以在服务端组件上获取数据，靠近数据源，提高获取的时间。但是我的项目中用的是 useQuery, 也就是说使用这个 hook 就变成了客户端组件，gg了。。。
安全性：服务器组件允许把敏感数据和逻辑保留在服务器上，这个倒是真的
缓存：在服务器上渲染，结果可以被缓存起来可以方便后续请求
性能：将 UI 的非交互式部分移动到服务器组件减少所需的客户端 JS 量，是的交互复杂的不能放在服务器组件里面，因为有点击事件这些就是客户端组件了
初始页面加载和首次内容绘制（FCP）：无需客户端加载，就可以看到 html 了，那么 FCP 和初始页面加加载指标就会很好
SEO 和流式传输

在服务器上，Next.js 使用 React 的 API 来协调渲染。渲染工作被分成块：通过各个路由段和Suspense 边界。

每个块分两步渲染

然后，在客户端

无需在静态和动态渲染之间进行选择，因为 Next.js 会根据使用的功能和 API 自动为每个路由选择最佳渲染策略。相反，您可以选择何时缓存或重新验证特定数据，并且您可以选择流式传输UI 的部分内容