渲染

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

¥Rendering converts the code you write into user interfaces. React and Next.js allow you to create hybrid web applications where parts of your code can be rendered on the server or the client. This section will help you understand the differences between these rendering environments, strategies, and runtimes.

基础知识

¥Fundamentals

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

¥To start, it's helpful to be familiar with three foundational web concepts:

• 你的应用代码可以在 环境 中执行：服务器和客户端。

  ¥The Environments your application code can be executed in: the server and the client.

• 当用户访问你的应用或与你的应用交互时启动的 请求-响应生命周期。

  ¥The Request-Response Lifecycle that's initiated when a user visits or interacts with your application.

• 网络边界 分隔服务器和客户端代码。

  ¥The Network Boundary that separates server and client code.

渲染环境

¥Rendering Environments

有两种可以渲染 Web 应用的环境：客户端和服务器。

¥There are two environments where web applications can be rendered: the client and the server.

• 客户端是指用户设备上的浏览器，它向服务器发送请求以获取应用代码。然后它将来自服务器的响应转换为用户界面。

  ¥The client refers to the browser on a user's device that sends a request to a server for your application code. It then turns the response from the server into a user interface.

• 服务器是指数据中心中存储应用代码、接收来自客户端的请求并发回适当响应的计算机。

  ¥The server refers to the computer in a data center that stores your application code, receives requests from a client, and sends back an appropriate response.

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

¥Historically, developers had to use different languages (e.g. JavaScript, PHP) and frameworks when writing code for the server and the client. With React, developers can use the same language (JavaScript), and the same framework (e.g. Next.js or your framework of choice). This flexibility allows you to seamlessly write code for both environments without context switching.

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

¥However, each environment has its own set of capabilities and constraints. Therefore, the code you write for the server and the client is not always the same. There are certain operations (e.g. data fetching or managing user state) that are better suited for one environment over the other.

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

¥Understanding these differences is key to effectively using React and Next.js. We'll cover the differences and use cases in more detail on the Server and Client Components pages, for now, let's continue building on our foundation.

请求-响应生命周期

¥Request-Response Lifecycle

一般来说，所有网站都遵循相同的请求-响应生命周期：

¥Broadly speaking, all websites follow the same Request-Response Lifecycle:

1. 用户操作：用户与 Web 应用交互。这可以是单击链接、提交表单或直接在浏览器地址栏中输入 URL。

   ¥User Action: The user interacts with a web application. This could be clicking a link, submitting a form, or typing a URL directly into the browser's address bar.

2. HTTP 请求：客户端向服务器发送 HTTP 请求，其中包含有关正在请求哪些资源、正在使用什么方法（例如 GET、POST）以及其他数据（如果需要）的必要信息。

   ¥HTTP Request: The client sends an HTTP request to the server that contains necessary information about what resources are being requested, what method is being used (e.g. GET, POST), and additional data if necessary.

3. 服务器：服务器处理请求并使用适当的资源进行响应。这个过程可能需要几个步骤，比如路由、获取数据等。

   ¥Server: The server processes the request and responds with the appropriate resources. This process may take a couple of steps like routing, fetching data, etc.

4. HTTP 响应：处理完请求后，服务器将 HTTP 响应发送回客户端。该响应包含状态代码（告诉客户端请求是否成功）和请求的资源（例如 HTML、CSS、JavaScript、静态资源等）。

   ¥HTTP Response: After processing the request, the server sends an HTTP response back to the client. This response contains a status code (which tells the client whether the request was successful or not) and requested resources (e.g. HTML, CSS, JavaScript, static assets, etc).

5. 客户端：客户端解析资源以渲染用户界面。

   ¥Client: The client parses the resources to render the user interface.

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

   ¥User Action: Once the user interface is rendered, the user can interact with it, and the whole process starts again.

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

¥A major part of building a hybrid web application is deciding how to split the work in the lifecycle, and where to place the Network Boundary.

网络边界

¥Network Boundary

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

¥In web development, the Network Boundary is a conceptual line that separates the different environments. For example, the client and the server, or the server and the data store.

在 React 中，你可以选择将客户端-服务器网络边界放置在最有意义的位置。

¥In React, you choose where to place the client-server network boundary wherever it makes the most sense.

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

¥Behind the scenes, the work is split into two parts: the client module graph and the server module graph. The server module graph contains all the components that are rendered on the server, and the client module graph contains all components that are rendered on the client.

将模块图视为应用中的文件如何相互依赖的直观表示可能会有所帮助。

¥It may be helpful to think about module graphs as a visual representation of how files in your application depend on each other.

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

¥You can use the React "use client" convention to define the boundary. There's also a "use server" convention, which tells React to do some computational work on the server.

构建混合应用

¥Building Hybrid Applications

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

¥When working in these environments, it's helpful to think of the flow of the code in your application as unidirectional. In other words, during a response, your application code flows in one direction: from the server to the client.

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

¥If you need to access the server from the client, you send a new request to the server rather than re-use the same request. This makes it easier to understand where to render your components and where to place the Network Boundary.

在实践中，该模型鼓励开发者首先考虑他们想要在服务器上执行什么，然后再将结果发送到客户端并使应用交互。

¥In practice, this model encourages developers to think about what they want to execute on the server first, before sending the result to the client and making the application interactive.

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

¥This concept will become clearer when we look at how you can interleave client and server components in the same component tree.