1.服务端组件

1.1服务端渲染的优势

• 优点
• 数据获取 在服务端获取数据更快
• 安全 缓存
• 打包大小 服务端组件的代码不会打包，减少包体积
• 首屏渲染快

1.2 声明服务端组件

next默认服务端组件

1.3服务端渲染策略

• 静态渲染
• 动态渲染
• streaming

1.4服务端组件渲染原理

Next.js 使用 React API 来编排渲染，渲染工作按路由段和 [Suspense 边界]拆分成多个 chunk，每个 chunk 分两步进行渲染：

1. react 讲服务端组件渲染成一个特殊的数据格式 react Server Component Payload
2. 在服务端使用RSC Payload 和客户端组件JS 指令渲染HTML 在客户端
3. 加载html 展示非交互的预览页面
4. 加载RSC payload 协调客户端和服务端组件树 更新DOM
5. 加载JS指令用于水合客户端组件并使应用程序具有交互性

水合（hydration），指的是将事件监听器添加到 DOM，使静态的 HTML 具有交互性的过程

1.5服务端渲染策略

• 静态渲染 默认
• 动态渲染
• 动态函数
  • cookies() headers() useSearchParams() searchParams()
• 使用这些函数的任意一个，都会导致整个路由转为动态渲染
• 退出缓存的数据请求
  • 默认fetch 缓存 可以设置退出缓存
  • fetch 使用 cache:'no-store'
  • fetch 使用revalidate：0
  • POST
  • 使用headers cookies 使用fetch
  • 配置路由段选项 const dynamic='force-dynamic'
  • 配置路由段选项fetchCache 跳过缓存

1.6 客户端组件渲染原理

优化首屏加载，next为客户端组件渲染一份静态HTML 意味着，用户第一次访问应用程序的时候，立即看到页面内容，无需等待客户端下载，解析和执行客户端组件

在服务端：

1. React 将服务端组件渲染成一个特殊的数据格式称为 React Server Component Payload (RSC Payload)
2. Next.js 在服务端使用 RSC Payload 和客户端组件 JavaScript 指令渲染 HTML

然后在客户端：

1. 加载 HTML 用于快速展示一个非交互的预览页面
2. 加载 RSC Payload 用于协调客户端和服务端组件树，并更新 DOM
3. 加载 JavaScript 指令用于水合客户端组件并使应用程序具有交互性

所以所谓“客户端组件”并不是完全在客户端使用 JavaScript 渲染，而是在客户端进行水合。