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

介紹#

在廣受讚譽的 App Router 發布後，Next.js 引入了另一個功能 Server Actions。這項新創新促進了服務器端數據操作，減少了對客戶端 JavaScript 的依賴，並逐步增強了表單功能——同時使用 JavaScript 和 React 創建強大的網絡應用程序，而無需傳統的 REST API。

在本文中，我們將挖掘這一創新提供的豐富優勢，並展示其如何在我們為 Next.js 實現基於 cookie 的無狀態會話時實現。這篇文章是詳細的指南，將帶你逐步完成使用 App Router 創建示範項目的每個階段。

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

遠離 REST API#

傳統上，如果我們想要創建一個在後端查詢數據庫的 Next.js 網絡應用程序，我們可能會創建一些 REST API 來驗證身份驗證狀態並查詢數據庫，然後前端的 React 應用程序將調用這些 API。但如果沒有必要向公眾開放 API，而這個 react 應用程序是唯一的客戶端，那麼使用 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。敬請期待！