Next13 動的クエリ、 Server component で実装するか？Client component で実装するか?

2023.10.18 UV Study : フロントエンド LT会 で発表した資料です。
https://uniquevision.connpass.com/event/294990/

Transcript

1. Next13 動的クエリ、 Server component で実装するか？ Client component で実装するか? 1
2. 自己紹介 栗崎一真 フロントエンドエンジニア 2021 卒 楽天グループ株式会社 AI SHIFT (サイバーエージェント) X: @KK_sep_TT GitHub: @kult0922 趣味 個人開発 旅行 ポーカー 2
3. Next 13.4 で App router が stable に Server comonent の本番環境使用が現実的に しかし Server component には 様々な制限がある 既存のプロダクトを Server component に置き換えることはできるのか？ 3
4. 動的な検索画面がつくれるか 検索ボックスに文字を入れて「検索」ボタンを押すと検索結果が表示される 検索ボタンが押されるたびに data srouce にリクエスト ※ 図書データは CiNii API から取得 https://support.nii.ac.jp 4
5. Server component の実装 export default async function List({ title }: Props) { if (!title) { return <div>Please input title</div>; } const data = await ( await fetch( `https://ci.nii.ac.jp/books/opensearch/search?title=${title}&format=json` ) ).json(); const books: any[] = data["@graph"][0].items; return ( <> {books.map((book: any) => { return ( <div key={book["@id"]} className="border-2 rounded m-2"> <div className="text-lg"> {book["title"]}</div> 著者: {book["dc:creator"]} </div> ); })} </> ); } 5
6. 問題 検索 Box に入力された値は Client component の state Client component の State は Server component では使えない Client component の値を Server component に送る必要がる 6
7. 2 つの解決方法 1. Request parameter を使う 2. Cookie を使う 7
8. Request parameter を使った実装 Server component export default function Page({ searchParams }) { const title = searchParams["title"]; return <List title={title} />; } Clinet Component const router = useRouter(); const params = new URLSearchParams([["title", title]]); router.replace(`/query-parameter?${params.toString()}`); 8
9. Cookie を使った実装 Server component export default function Page() { const cookieStore = cookies(); const title = decodeURIComponent(cookieStore.get("title")?.value ?? ""); return <List title={title} />; } Clinet Component const router = useRouter(); document.cookie = `title=${encodeURIComponent(title)}`; router.refresh(); // router cache を purge 9
10. 問題 Client component の 値が Server component に渡る処理が追いづらい router.refresh() すると同じ root のすべてのコンポーネントが再実行されてしまう ただし fetch()の結果は cache されている useTransition()を使用することで改善は可能 10
11. 検索結果表示部分 Client component でいいのでは？ 11
12. Server component を使うメリットってなんだっけ？ Fetch performance: data source に近い server で fetch を行うことでパフォーマンス向 上 Cacheing: サーバー上でレンダリングすることで、結果をキャッシュし、その後のリク エストやユーザー間で再利用することができる 今回のような動的クエリだとこの恩恵はない Security: トークンや API キーなどの機密データやロジックを、クライアントに公開する リスクなしにサーバー上に保持することができる 12
13. 個人的結論 基本的には今回のような動的クエリは Client component で書く URL にパラメータを持たせたいときは Server component を使用する Fetch performance が気になるときは Server component を検討する みなさんの意見も聞きたいです！ 13