渲染 | 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 在客户端时在服务端执行某些计算工作。

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

如果需要从客户端访问服务端，您应该向服务端发送新的请求，而不是复用同一请求。这有助于理解组件应在何处渲染以及网络边界的位置。

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

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