一、渲染
将 React 中编写的代码转换为 UI 的 HTML 表示形式是不可避免的工作单元。
这个过程称为渲染。
1. 预渲染（默认）
a. 服务器端渲染（水合作用）
使用服务器端呈现，页面的 HTML 是在服务器上为每个请求生成的。
生成的 HTML、JSON 数据和 JavaScript 指令以使页面具有交互性，然后发送到客户端。
在客户端，HTML 用于显示快速的非交互式页面，而 React 使用 JSON 数据和 JavaScript 指令使组件具有交互性（例如，将事件处理程序附加到按钮）。
这个过程称为水合作用。
- getServerSideProps
- React 18 和 Next 12 引入了React 服务器组件的 alpha 版本。
服务器组件完全在服务器上呈现，不需要客户端 JavaScript 来呈现。
此外，服务器组件允许开发人员在服务器上保留一些逻辑，并且只将该逻辑的结果发送给客户端。
这减少了发送到客户端的包大小并提高了客户端渲染性能。
b. 静态站点生成
适合没有交互的页面，例如新闻博客等
- getStaticProps
- 可以在构建站点后使用
增量静态更新
生成来创建或更新静态页面 。这意味着如果您的数据发生变化，不必重建整个站点。
2. 客户端渲染
初始渲染工作发生在用户设备上，特定组件使用客户端渲染。
- useEffect()
- useSWR
二、代码存储的位置和运行的网络
1. 源服务器
当源服务器收到请求时，它会在发送响应之前进行一些计算。
该计算工作的结果可以移动到 CDN（内容交付网络）。
2. 内容交付网络（CDN）
CDN 将静态内容（例如 HTML 和图像文件）存储在世界各地的多个位置，并放置在客户端和源服务器之间。
当有新请求进来时，离用户最近的 CDN 位置可以用缓存的结果进行响应。
3. 边缘（推荐）
与 CDN 类似，边缘服务器分布在世界各地的多个位置。但与存储静态内容的 CDN 不同，一些边缘服务器可以运行代码。
这意味着缓存和代码执行都可以在靠近用户的边缘完成。
- 在 Next.js 中，可以使用Middleware在边缘运行代码，
很快就会使用React Server Components。