渲染
渲染将您写的代码转化为用户界面。React 和 Next.js 允许您创建混合 web 应用程序，其中部分代码可以在服务器或客户端渲染。本节将帮助您了解这些渲染环境、策略和运行时之间的差异。
基本原理
首先, 熟悉以下三个基础 Web 概念很有帮助：
- 您的应用程序代码可以在以下环境中执行: 服务器和客户端。
- 当用户访问或与应用程序交互时启动Request-Response 生命周期。
- 网络边界 将服务器和客户端代码分开。
Rendering Environments
有两种环境可以渲染 Web 应用程序: 客户端和服务器。
- 客户端指的是用户设备上的浏览器，它向服务器发送请求以获取应用程序代码。然后，它会将服务器的响应转换为用户界面。
- 服务器指的是数据中心中存储应用程序代码、接收来自客户端的请求并返回适当响应的计算机。
过去, 开发者在为服务器和客户端编写代码时必须使用不同的语言（例如：JavaScript 和 PHP）和框架。使用 React, 开发者可以使用统一语言 (JavaScript), 和统一框架 (例如：Next.js 或您选择的框架)。这种灵活性使您在不切换上下文的情况下无缝地为两种环境编写代码。
不过, 每个环境有它自己一套功能和约束。因此。您为服务器和客户端编写的代码并不总是相同的。有些操作(例如数据获取或管理用户状态)更适合于一种环境。
了解这些差异是有效使用 React 和 Next.js 的关键。 我们将会在服务器 和 客户端组件页面更详细地介绍差异和案例, 现在，让我们继续构建基础。
Request-Response Lifecycle
一般来说，所有网站都遵循相同的Request-Response 生命周期：
- 用户操作: 用户与 web 应用程序交互。这可能是点击链接、提交表单、或直接在浏览器地址栏输入 URL。
- HTTP 请求: 客户端向服务器发送HTTP 请求，该请求包含的必要信息关于在请求哪些资源、使用什么方法（例如：
GET或POST）以及必要时的附加数据。 - 服务器: 服务器处理请求并使用适当的资源进行响应。这个过程可能需要几个步骤，比如路由、获取数据等。
- HTTP 响应: 处理请求后，服务器向客户端发送一个 HTTP 响应。这个响应包含一个状态码(告诉客户端请求是否成功)和请求的资源(例如 HTML、CSS、JavaScript、静态资产等)。
- 客户端: 客户端解析资源以渲染用户界面。
- 用户操作: 一旦用户界面被渲染，用户就可以与之交互，然后整个过程重新开始。
构建混合 web 应用程序的一个主要部分是决定如何在生命周期中分割工作，以及在哪里放置网络边界。
Network Boundary
在 Web 开发中, 网络边界是分隔不同环境的概念线。例如，客户端和服务器，或者服务器和数据存储。
在 React 中，您可以选择将客户端-服务器网络边界放置在最有意义的位置。
在后台, 工作分为两部分:客户端模块图和服务器模块图。服务器模块图包含在服务器上呈现的所有组件，客户端模块图包含在客户端上呈现的所有组件。
将模块图视为应用程序中文件如何相互依赖的可视化描绘可能会有所帮助。
你可以使用 React 的 "use client"约定来定义边界。还有一个"use server"约定，它告诉 React 在服务器上执行一些计算工作。
构建混合应用程序
在这些环境中工作时，将应用程序中的代码流视为单向的是很有帮助的。换句话说，在响应期间，应用程序代码朝一个方向流动:从服务器到客户端。
如果需要从客户端访问服务器，您可以向服务器发送一个新的请求，而不是重复使用相同的请求。这样可以更容易理解在哪里渲染组件以及在哪里放置网络边界。
实际上, 该模型鼓励开发者考虑在将结果发送到客户端并使应用程序具有交互性之前，首先他们想要在服务器上执行什么。
当我们研究如何在同一组件树中交错客户端和服务器组件时，这个概念会变得更加清晰。