シングルページアプリケーションのディープリンク

SPAのディープリンク

ディープリンクとは、シングルページアプリケーション内の特定のビューや状態を指すURLを作成することです。ユーザーがホームページだけでなく、あらゆる画面にブックマーク、共有、直接アクセスできるようにします。

課題

従来のマルチページWebサイトでは、各URLがサーバーレンダリングされたHTMLページに対応します。SPAではHTMLページは1つだけで、JavaScriptがすべてのビュー遷移を処理します。課題は、すべてがクライアントで行われるにもかかわらず、URLが期待通りに機能するようにすることです。

URL内の状態

適切に設計されたSPAは意味のある状態をURLにエンコードします：

https://app.example.com/projects/42/tasks?status=open&sort=due_date#task-789
\_____________________________/ \_/ \___/ \_________________________________/
           ベース              プロジェクト ビュー       フィルターとアンカー

実装パターン

React Router：

// ルート定義
<Route path="/projects/:projectId/tasks" element={<TaskList />} />

// パラメータの読み取り
const { projectId } = useParams();
const [searchParams] = useSearchParams();
const status = searchParams.get("status");

よくある落とし穴

• リフレッシュ時の状態喪失 — 状態がメモリのみにある場合、リフレッシュで失われる
• 壊れた戻るボタン — 履歴エントリを多く追加しすぎると戻るボタンが壊れた感じになる
• 古いリンク — 削除されたリソースへのディープリンクには適切な404処理が必要
• サーバーフォールバックの欠如 — サーバーはすべてのルートでSPAシェルを返す必要がある（404ではなく）