NextJS中文文档 - Rendering
渲染将你编写的代码转换为用户界面。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 应用程序的一个主要部分是决定如何在生命周期中分割工作，以及在哪里放置网络边界。
网络边界
在 Web 开发中，网络边界是一个概念性的线，它分隔不同的环境。例如，客户端和服务器，或服务器和数据存储。
在 React 中，你可以选择在最合适的地方放置客户端-服务器网络边界。
在背后，工作被分为两部分：客户端模块图和服务器模块图。服务器模块图包含在服务器上渲染的所有组件，客户端模块图包含在客户端上渲染的所有组件。
将模块图视为应用程序中文件相互依赖关系的可视化表示可能会有所帮助。
你可以使用 React 的 'use client' 约定来定义边界。还有一个 "use server" 约定，它告诉 React 在服务器上执行一些计算工作。
构建混合应用程序
在这些环境中工作时，将应用程序中代码的流程视为单向的会很有帮助。换句话说，在响应过程中，你的应用程序代码沿一个方向流动：从服务器到客户端。
如果你需要从客户端访问服务器，你发送一个新的请求到服务器，而不是重用同一个请求。这使得更容易理解在哪里渲染你的组件以及在哪里放置网络边界。
实践中，这种模型鼓励开发人员首先考虑他们想要在服务器上执行什么，然后再将结果发送到客户端并使应用程序具有交互性。
当我们看到如何在同一组件树中交错客户端和服务器组件时，这个概念将变得更加清晰。 /nextjs-cn/
