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
14
マインクラフトのコマンド圧縮の効率化を考えたら、40年前の論文のアルゴリズムを実装することになった話
kult0922
1
150
Web workerを使ってUXを向上させようとした話
kult0922
1
430
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
How GitHub (no longer) Works
holman
314
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Visualization
eitanlees
146
16k
Producing Creativity
orderedlist
PRO
346
40k
A Modern Web Designer's Workflow
chriscoyier
695
190k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Fireside Chat
paigeccino
37
3.5k
Faster Mobile Websites
deanohume
307
31k
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