Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Next13 動的クエリ、 Server component で実装するか?Client co...
Search
kurisaki kazuma
October 17, 2023
0
210
Next13 動的クエリ、 Server component で実装するか?Client component で実装するか?
2023.10.18 UV Study : フロントエンド LT会 で発表した資料です。
https://uniquevision.connpass.com/event/294990/
kurisaki kazuma
October 17, 2023
Tweet
Share
More Decks by kurisaki kazuma
See All by kurisaki kazuma
新規開発と並走したリファクタリング戦略.
kult0922
0
16
マインクラフトのコマンド圧縮の効率化を考えたら、40年前の論文のアルゴリズムを実装することになった話
kult0922
1
170
Web workerを使ってUXを向上させようとした話
kult0922
1
440
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Applications with DynamoDB
mza
96
6.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Writing Fast Ruby
sferik
629
62k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Fireside Chat
paigeccino
40
3.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Mobile First: as difficult as doing things right
swwweet
224
10k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Transcript
Next13 動的クエリ、 Server component で実装するか? Client component で実装するか? 1
自己紹介 栗崎一真 フロントエンドエンジニア 2021 卒 楽天グループ株式会社 AI SHIFT (サイバーエージェント) X:
@KK_sep_TT GitHub: @kult0922 趣味 個人開発 旅行 ポーカー 2
Next 13.4 で App router が stable に Server comonent
の本番環境使用が現実的に しかし Server component には 様々な制限がある 既存のプロダクトを Server component に置き換えることはできるのか? 3
動的な検索画面がつくれるか 検索ボックスに文字を入れて「検索」ボタンを押すと検索結果が表示される 検索ボタンが押されるたびに data srouce にリクエスト ※ 図書データは CiNii API
から取得 https://support.nii.ac.jp 4
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
問題 検索 Box に入力された値は Client component の state Client component
の State は Server component では使えない Client component の値を Server component に送る必要がる 6
2 つの解決方法 1. Request parameter を使う 2. Cookie を使う 7
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
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
問題 Client component の 値が Server component に渡る処理が追いづらい router.refresh() すると同じ
root のすべてのコンポーネントが再実行されてしまう ただし fetch()の結果は cache されている useTransition()を使用することで改善は可能 10
検索結果表示部分 Client component でいいのでは? 11
Server component を使うメリットってなんだっけ? Fetch performance: data source に近い server で
fetch を行うことでパフォーマンス向 上 Cacheing: サーバー上でレンダリングすることで、結果をキャッシュし、その後のリク エストやユーザー間で再利用することができる 今回のような動的クエリだとこの恩恵はない Security: トークンや API キーなどの機密データやロジックを、クライアントに公開する リスクなしにサーバー上に保持することができる 12
個人的結論 基本的には今回のような動的クエリは Client component で書く URL にパラメータを持たせたいときは Server component を使用する
Fetch performance が気になるときは Server component を検討する みなさんの意見も聞きたいです! 13
14