使用 Server Actions 實現 Next.js 的無狀態會話

介紹#

在備受推崇的 App Router 發佈後，Next.js 推出了另一項功能，Server Actions。這一創新促進了伺服器端的數據處理，減少了對客戶端 JavaScript 的依賴，並漸進地增強了表單功能——同時使用 JavaScript 和 React 來創建強大的 web 應用程序，而無需傳統的 REST API。

在本文中，我們將深入探討這項創新的豐富優勢，並通過實現一個基於 cookie 的無狀態會話來展示其作用。這篇文章將作為逐步指南，引導你完成使用 App Router 建立一個演示項目的每個階段。

我們的實際展示可以使用 Edge Runtime 部署到 Vercel。你可以從 GitHub 下載完整的源代碼。

遠離 REST API#

傳統上，如果我們想要創建一個在後端查詢數據庫的 Next.js web 應用，我們可能會創建一些 REST API 來驗證認證狀態並查詢數據庫，然後前端 React 應用將調用這些 API。但如果沒有公共開放 API 的需求，而且這個 react 應用是唯一的客戶端，使用 REST API 似乎是多餘的，因為它們只會被我們自己調用。

有了 Server Actions，React 組件現在可以運行伺服器端代碼。不需要手動創建 API 端點，Server Actions 自動創建 Next.js 在背後使用的端點。調用 Server Action 時，Next.js 會將 POST 請求發送到你所在的頁面，並附帶執行哪個操作的元數據。

無狀態會話的需求#

作為創建無狀態應用程序的首選框架，Next.js 通常意味著無伺服器，我們不能使用內存來存儲會話數據。傳統會話需要使用外部存儲服務，例如 Redis 或數據庫。

然而，當會話數據足夠小時，我們有另一條途徑：利用安全的加密方法和存儲在客戶端的 cookies，設計一個無狀態會話。此方法繞過了對外部存儲的需求，保持會話數據去中心化，提供了關於伺服器負載和整體應用性能的非平凡優勢。

所以我們的目標是一個輕量、高效的無狀態會話，它利用客戶端存儲能力，同時通過妥善執行的加密來確保安全。

基本會話實現#

首先，我們需要開始一個新項目：

有關安裝的更多詳細信息，請參考 官方指南。

創建會話庫#

為了更易於理解 Server Actions，我們將首先創建一個簡化版本的會話。在這個版本中，我們將使用 JSON 將會話數據存儲在 cookies 中。

創建一個名為 session/index.ts 的文件，並包含以下代碼：

第一行 "use server" 標記了此文件的函數是 Server Actions。

由於我們無法直接訪問 request 和 response，我們使用 next/headers 來讀取和寫入 cookies。這僅在 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。敬請期待！