渲染 | Next.js - 简体中文

渲染将您编写的代码转换为用户界面。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 在服务端执行计算工作。

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

如果需要从客户端访问服务端，您应该向服务端发送新的请求，而不是复用原有请求。这有助于明确组件渲染位置和网络边界设置。

实践中，这种模式鼓励开发者先考虑在服务端执行哪些操作，再将结果发送到客户端实现应用交互性。

当我们研究如何在同一个组件树中交错使用客户端和服务端组件时，这个概念会更加清晰。