外观
渲染
渲染
渲染将您编写的代码转换为用户界面。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 在服务器上执行一些计算工作。
构建混合应用程序
在这些环境中工作时,将应用程序代码的流程视为单向会很有帮助。换句话说,在响应期间,您的应用程序代码以一个方向流动:从服务器到客户端。
如果您需要从客户端访问服务器,您会向服务器发送一个新的请求,而不是重用同一个请求。这使得更容易理解在哪里渲染组件以及在哪里放置网络边界。
在实践中,这个模型鼓励开发人员首先考虑他们想在服务器上执行什么,然后再将结果发送到客户端并使应用程序具有交互性。
当我们查看如何在同一组件树中交错客户端和服务器组件时,这个概念会变得更清晰。