渲染

渲染将您编写的代码转换为用户界面。React 和 Next.js 允许您创建混合 Web 应用，其中部分代码可以在服务器或客户端上渲染。本节将帮助您了解这些渲染环境、策略和运行时之间的区别。

基础知识

首先，熟悉三个基础的 Web 概念很有帮助

• 您的应用程序代码可以执行的环境：服务器和客户端。
• 用户访问或与您的应用程序交互时启动的请求-响应生命周期。
• 将服务器代码和客户端代码分开的网络边界。

渲染环境

Web 应用可以渲染在两个环境中：客户端和服务器。

• **客户端**指的是用户设备上的浏览器，它向服务器发送请求以获取您的应用代码。然后，它将服务器的响应转换为用户界面。
• **服务器**指的是数据中心中的计算机，它存储您的应用代码，接收来自客户端的请求，并发送相应的响应。

从历史上看，开发人员在为服务器和客户端编写代码时必须使用不同的语言（例如 JavaScript、PHP）和框架。使用 React，开发人员可以使用**相同的语言**（JavaScript）和**相同的框架**（例如 Next.js 或您选择的框架）。这种灵活性允许您无缝地为这两个环境编写代码，而无需上下文切换。

但是，每个环境都有其自身的功能和约束。因此，您为服务器和客户端编写的代码并不总是相同的。某些操作（例如数据获取或管理用户状态）更适合于一个环境而不是另一个环境。

了解这些差异是有效使用 React 和 Next.js 的关键。我们将在服务器和客户端组件页面上更详细地介绍这些差异和用例，现在，让我们继续构建我们的基础。

请求-响应生命周期

广义地说，所有网站都遵循相同的**请求-响应生命周期**

1. **用户操作：**用户与 Web 应用交互。这可能是点击链接、提交表单或直接在浏览器的地址栏中键入 URL。
2. **HTTP 请求：**客户端向服务器发送HTTP请求，其中包含有关正在请求哪些资源、正在使用哪种方法（例如GET、POST）以及必要时的其他数据的信息。
3. **服务器：**服务器处理请求并响应相应的资源。此过程可能需要几个步骤，例如路由、获取数据等。
4. **HTTP 响应：**处理请求后，服务器将 HTTP 响应发送回客户端。此响应包含状态代码（告诉客户端请求是否成功）和请求的资源（例如 HTML、CSS、JavaScript、静态资产等）。
5. **客户端：**客户端解析资源以渲染用户界面。

6. 用户操作：一旦用户界面渲染完成，用户就可以与之交互，整个过程重新开始。

构建混合 Web 应用程序的一个重要部分是决定如何在生命周期中拆分工作，以及在哪里放置网络边界。

网络边界

在 Web 开发中，网络边界是一个概念性的界限，用于分隔不同的环境。例如，客户端和服务器，或者服务器和数据存储。

在 React 中，您可以根据需要选择在任何位置放置客户端-服务器网络边界。

在幕后，工作被分成两部分：客户端模块图和服务器模块图。服务器模块图包含在服务器上渲染的所有组件，而客户端模块图包含在客户端上渲染的所有组件。

将模块图视为应用程序中文件之间依赖关系的可视化表示可能会有所帮助。

您可以使用 React 的 "use client" 约定来定义边界。还有一个 "use server" 约定，它告诉 React 在服务器上执行一些计算工作。

构建混合应用程序

在这些环境中工作时，将应用程序中代码的流程视为单向的会很有帮助。换句话说，在响应期间，应用程序代码沿一个方向流动：从服务器到客户端。

如果需要从客户端访问服务器，则发送一个新的请求到服务器，而不是重复使用同一个请求。这使得更容易理解在哪里渲染组件以及在哪里放置网络边界。

在实践中，此模型鼓励开发人员首先考虑希望在服务器上执行什么操作，然后再将结果发送到客户端并使应用程序具有交互性。

当我们查看如何在同一组件树中交错客户端和服务器组件时，这个概念将变得更加清晰。