使用 Server Actions 实现 Next.js 的无状态会话

介绍#

随着广受欢迎的 App Router 发布，Next.js 引入了另一个新功能，Server Actions。这一新创新助力服务器端数据操作，减少对客户端 JavaScript 的依赖，并逐步增强表单功能——这些都使用 JavaScript 和 React 创建强大的 Web 应用程序，而无需传统的 REST API。

在本文中，我们将挖掘这一创新所提供的大量优势，并通过实现 Next.js 的基于 Cookie 的无状态会话来看它的实际应用。本文将作为一个分步指南，带领你通过使用 App Router 构建一个演示项目的每个阶段。

我们的实际示范可以使用 Edge Runtime 部署到 Vercel。你可以从 GitHub 下载完整的源代码。

远离 REST API#

传统上，如果我们想要创建一个在后端查询数据库的 Next.js Web 应用，我们可能会创建一些 REST API 来验证身份状态并查询数据库，然后前端的 React 应用会调用这些 API。但如果这个 React 应用是唯一的客户端，并且我们不需要向公众开放 API，使用 REST API 显得有些多余，因为它们只会被我们自己调用。

通过 Server Actions，React 组件现在可以运行服务器端代码。不需要手动创建 API 端点，Server Actions 会在后台为 Next.js 自动创建一个端点。当调用一个 Server Action 时，Next.js 会向当前页发送一个带有要运行的操作元数据的 POST 请求。

无状态会话的需求#

作为创建无状态应用程序的首选框架，Next.js 通常意味着无服务器环境，在这种环境下我们无法使用内存存储会话数据。传统的会话需要使用外部存储服务，如 Redis 或数据库。

然而，当会话数据足够小时，我们有另一种选择：使用安全加密方法和客户端存储的 Cookie 来设计无状态会话。这种方法无需外部存储并使会话数据去中心化，提供了关于服务器负载和整体应用性能的重要好处。

因此，我们的目标是一个轻量、高效的无状态会话，它利用客户端存储能力并通过精心实施的加密来确保安全。

基本会话实现#

首先，我们需要启动一个新项目：

有关安装的更多详细信息，请参阅官方指南。

构建会话库#

为了更容易理解 Server Actions，我们将首先创建一个简化版本的会话。在这个版本中，我们将使用 JSON 将会话数据存储在 Cookie 中。

创建一个名为 session/index.ts 的文件，并包含以下代码：

第一行 "use server" 标记此文件中的函数为 Server Actions。

由于我们不能直接访问 request 和 response，因此我们使用 next/headers 来读写 Cookie。这仅在 Server Actions 中可用。

两个新的 Server Actions#

有了会话库，现在是时候实现登录和注销功能了，以展示会话的可用性。

将以下代码加入 user/index.ts：

在这里，我们使用了一个简化的登录过程，只需要一个用户名。

构建页面#

在 App Router 中，页面通常是一个异步组件，Server Actions 不能直接从这种组件中调用。我们需要使用 "use client" 创建组件：

components/sign-in.tsx

components/sign-out.tsx

最后，让我们构建 app/page.tsx

实现加密#

Server Actions 的工作完成了。现在，最后一部分涉及加密的实现，可以通过 crypto 来完成。

接下来，修改会话库实现以下功能：

结论#

恭喜！你已经成功为 Next.js 实现了无状态会话。这里是在 Vercel 上的在线预览，你可以下载完整源代码。我们希望本指南可以帮助你理解全新的 Server Actions。

接下来，我们将探索如何使用 Server Actions 集成 Logto 到 Next.js。敬请期待！