在開發應用程式時，將應用程式狀態保存在 URL 中是一個重要的考量因素。本篇文章將探討在 URL 中保存狀態的優點，並提供實作指南，以便開發者能更有效地管理應用程式狀態。
為何要在 URL 中保存應用程式狀態？
共享與書籤
-
方便共享： 用戶可以輕鬆分享帶有特定狀態的網站連結，確保接收者看到完全相同的內容和使用者介面。
-
方便書籤： 用戶可以將帶有特定狀態的 URL 加入書籤，以便日後快速恢復到該狀態。
-
瀏覽歷史： 用戶可以使用瀏覽器的「上一頁」和「下一頁」按鈕來導覽不同的狀態。
其他優點
-
重新整理： 用戶在重新整理頁面後，仍能保持相同的狀態，避免重置所有設定。
-
URL 操作： 進階用戶可以直接修改 URL，以達到特定的狀態或進行數據抓取。
實作指南：使用 Next.js 保持 URL 狀態
以下將以 Next.js 為例，介紹如何將應用程式狀態保存在 URL 中。
基礎程式碼
假設我們有一個包含 select color 元件的頁面，此元件用於選擇顏色。
// Select Color 元件 (簡化範例)
function SelectColor() {
// ...
return (
// ...
);
}
初始設定：使用 useSearchParams
Next.js 提供了 useSearchParams Hook，可以輕鬆存取和修改 URL 中的查詢參數。
import { useSearchParams } from 'next/navigation';
function Page() {
const searchParams = useSearchParams();
const color = searchParams.get('color');
// ...
}
修改 URL：使用 router.push
要修改 URL，可以使用 router.push 方法。這會更新 URL，並觸發頁面重新渲染。
import { useRouter } from 'next/navigation';
function SelectColor() {
const router = useRouter();
const handleColorChange = (newColor) => {
router.push(`?color=${newColor}`, { scroll: false }); // scroll: false 防止捲動
};
// ...
}
進階技巧：使用 nux-query-state
nux-query-state 是一個方便的 Hook，可以更簡潔地管理 URL 中的狀態。
- 安裝： 安裝
nux-query-state套件。 - 設定： 在佈局檔案中加入
NX Adaptor。 - 使用： 使用
useQueryStateHook 宣告狀態變數。
import { useQueryState } from 'nux-query-state';
function Page() {
const [color, setColor] = useQueryState('color', {
shallow: false, // 觸發伺服器端請求
});
const handleColorChange = (newColor) => {
setColor(newColor);
};
// ...
}
伺服器端驗證與快取
為了確保資料的有效性，可以使用 createSearchParamsCache 建立伺服器端快取，並驗證查詢參數。
import { createSearchParamsCache } from 'nux-query-state';
import { z } from 'zod';
const searchParamsCache = createSearchParamsCache({
q: z.string().optional(),
color: z.enum(['red', 'blue', 'green', 'all']).optional(),
size: z.enum(['S', 'M', 'L']).optional(),
});
export default function Page({ searchParams }) {
const parsedParams = searchParamsCache.parse(searchParams);
const color = parsedParams.color;
// ...
}
總結
將應用程式狀態保存在 URL 中可以提高使用者體驗，並簡化共享和書籤流程。通過使用 Next.js 的 useSearchParams Hook 或 nux-query-state 等工具，開發者可以更輕鬆地管理 URL 中的狀態，並創建更強大和易於使用的應用程式。