渲染
渲染将您编写的代码转换为用户界面。React 和 Next.js 允许您创建混合型 Web 应用程序，其中代码的部分可以在服务器或客户端进行渲染。本节将帮助您理解这些渲染环境、策略和运行时之间的区别。
基础
首先，熟悉以下三个基础 Web 概念很有帮助：
渲染环境
Web 应用程序可以在两个环境中进行渲染：客户端和服务器端。
- 客户端 指的是用户设备上的浏览器，它向服务器发送请求以获取您的应用程序代码。然后，它将服务器的响应转换为用户界面。
- 服务器 指的是数据中心中的计算机，它存储您的应用程序代码，接收来自客户端的请求，并发送回适当的响应。
历史上，开发人员在编写服务器和客户端代码时必须使用不同的语言（例如 JavaScript、PHP）和框架。通过 React，开发人员可以使用 相同的语言（JavaScript），以及 相同的框架（例如 Next.js 或您选择的框架）。这种灵活性允许您无缝地为两种环境编写代码，而无需上下文切换。
然而，每个环境都有其自身的功能集和限制。因此，您为服务器和客户端编写的代码并不总是相同的。有些操作（例如数据获取或管理用户状态）更适合于一个环境而不是另一个环境。
理解这些差异是有效使用 React 和 Next.js 的关键。我们将在 服务器 和 客户端 组件页面上更详细地介绍差异和用例，现在，让我们继续建立我们的基础。
请求-响应生命周期
广义上讲，所有网站都遵循相同的 请求-响应生命周期：
- 用户操作： 用户与 Web 应用程序交互。这可能是点击链接、提交表单或直接在浏览器的地址栏中输入 URL。
- HTTP 请求： 客户端向服务器发送一个 HTTP 请求，其中包含有关所请求资源的必要信息，使用的方法（例如
GET、POST）以及必要时的额外数据。 - 服务器： 服务器处理请求并用适当的资源做出响应。这个过程可能需要几个步骤，如路由、获取数据等。
- HTTP 响应： 处理请求后，服务器将 HTTP 响应发送回客户端。此响应包含状态码（告诉客户端请求是否成功）和请求的资源（例如 HTML、CSS、JavaScript、静态资产等）。
- 客户端： 客户端解析资源以呈现用户界面。
- 用户操作： 一旦用户界面呈现，用户就可以与之交互，整个过程再次开始。
构建混合型 Web 应用程序的一个重要部分是决定如何在生命周期中分配工作，以及在哪里放置网络边界。
网络边界
在网络开发中，网络边界是一个概念性的界线，用于分隔不同的环境。例如，客户端和服务器之间，或者服务器和数据库之间。
在 React 中，你可以根据需要在任何地方设置客户端-服务器网络边界。
在幕后，工作被分成两个部分：客户端模块图和服务器端模块图。服务器模块图包含所有在服务器上渲染的组件，而客户端模块图包含所有在客户端上渲染的组件。
将模块图视为应用程序中文件相互依赖的视觉表示可能会有所帮助。
你可以使用 React 的 "use client" 约定来定义边界。还有一个 "use server" 约定，它告诉 React 在服务器上执行一些计算工作。
构建混合应用程序
在这些环境中工作时，将应用程序中的代码流视为单向的会很有帮助。换句话说，在响应期间，你的应用程序代码单向流动：从服务器到客户端。
如果你需要从客户端访问服务器，你会发送一个新的请求到服务器，而不是重用同一个请求。这使得理解在哪里渲染你的组件以及在哪里放置网络边界变得更容易。
在实践中，这种模型鼓励开发者首先考虑他们想要在服务器上执行什么，然后再将结果发送到客户端并使应用程序变得交互式。
当我们看到如何在同一组件树中交错客户端和服务器组件时，这个概念将变得更加清晰。