'use server'の越境を可視化する Next.jsの'use server'と見えないPOSTとの向き合い方

2025.09.30 余熱NIGHT from FEC北海道＆東京2025

https://makotot.github.io/presentation-20250930/

Transcript

1. 'use server' の越境を可視化 する Next.jsの'use server' と見えないPOSTとの向き合い方 2025.09.30 余熱NIGHT from FEC北海道＆東京2025 Makoto Tateno
2. 2 / 12 自己紹介 Makoto Tateno / 舘野 真 株式会社カオナビ github.com/makotot x.com/makototdev
3. 3 / 12 RSCとトレードオフ React Server Components (RSC)は、1つのプログラムでサーバーとクライア ントとをシームレスに行き来する Next.jsなどのRSC対応のフレームワークがこのモデルを実装 先日のフロントエンドカンファレンス北海道での「RSCの時代にReact とフレームワークの境界を探る」で詳しく解説されてましたね RSCをサポートするフレームワークを選択 = 実行環境の境界が曖昧であるこ とを前提にする
4. 4 / 12 'use server' ディレクティブ クライアントからサーバーの処理をシームレスに呼ぶディレクティブ 非同期関数をServer Functionとしてマークするもの クライアントからサーバーへの入り口 async function addTodoAction(formData: FormData) { 'use server'; /* 非同期関数の先頭に記述することでその関数がServer Functionに */ } 'use client'; export function NewTodo() { return <form action={addTodoAction}>…</form> } 'use server'; export function addTodoAction(formData: FormData) {
5. 5 / 12 Next.js内部での'use server' の仕組み swc が 'use server' を検出して関数に一意ID(abc123 )を付与し クライアントから呼べるスタブ関数を生成 fetchServerAction が現在のURL(canonicalUrl )へPOST サーバー側でマニフェスト(.next/server/server-reference- manifest.json )と照合して実体関数が呼ばれる export var addTodoAction = /*#__PURE__*/ createServerReference("abc123", callServer, void 0, findSourceMapURL, "addTodo import { createServerReference, callServer, findSourceMapURL } from "private-next-rsc-action-client-wrapper"; const res = await fetch(state.canonicalUrl, { method: 'POST', // https://github.com/vercel/next.js/blob/40f1d7814d8f1ab3d9e169b389015b8d6f258fb3/packages/next/src/client/components/ headers: { [ACTION_HEADER]: actionId, ..., },
6. 6 / 12 暗黙的なfetch Next.jsの'use server' は、関数実行時に内部でPOST リクエスト 通信処理はフレームワークに隠蔽され、開発者からは "見えづらい" うっかりして、無用にuse server つけたり、入力検証漏れるかも 境界が曖昧になるのはRSCの性質 境界を ”見せる” とトレードオフを受け入れやすくなる
7. 7 / 12 VS Code拡張機能で可視化 $ code --install-extension makotot.nextjs-server-functions- visualizer 'use client' ディレクティブに続いて、'use server' も可視化しました Next.js App RouterのコンポーネントをVS Codeでサーバー・クライアン ト別に可視化する
8. 8 / 12
9. 9 / 12
10. 10 / 12 VS Code可視化アプローチ TypeScript ASTで'use server' ディレクティブの定義元を抽出 + 呼び出し 元の候補を抽出 TypeScript Language Serviceで呼び出し元と定義元との解決を行う TypeScript AST 定義元の抽出 呼び出し元候補の抽出 VS Code TypeScript Language Service 照合してサーバーアクションの範囲を抽出
11. 11 / 12 まとめ RSCでは、サーバーとクライアントの境界が見えづらい Next.js App Routerの場合、まず、'use server' ディレクティブによっ てクライアントからPOST リクエストが飛ぶ前提を持つ 暗黙的なものをエディターで可視化することは、RSCのトレードオフに対する 1つの緩和策
12. ありがとうございました！