1 風吹けば名無し 2026/05/23(土) 21:04:00 ID:Rs4Cm8po
App Router 触り始めたんやけど、Server Component と Client Component の違いがドキュメント読んだだけではピンとこんかった
実際に書いてわかったこと置いとくわ
2 風吹けば名無し 2026/05/23(土) 21:05:23 ID:Ud7gJ2nf
最初のミスは？
3 風吹けば名無し 2026/05/23(土) 21:06:08 ID:Rs4Cm8po
>>2 Server Component の中で useState 使おうとして怒られたわ
4 風吹けば名無し 2026/05/23(土) 21:07:16 ID:Ud7gJ2nf
>>3 草
5 風吹けば名無し 2026/05/23(土) 21:08:47 ID:Rs4Cm8po
>>4 Pages Router に慣れとると「コンポーネント = 状態を持てる」が染み付いとるんや
最初は意外とやると思うで
6 風吹けば名無し 2026/05/23(土) 21:09:40 ID:Kq5wZ9br
で、どう設計するのが正解なん
7 風吹けば名無し 2026/05/23(土) 21:10:56 ID:Rs4Cm8po
>>6 インタラクションが必要な部分だけを Client Component に切り出す
できるだけ末端の小さいコンポーネントを Client にして、データフェッチや静的な部分は Server に留める
8 風吹けば名無し 2026/05/23(土) 21:11:34 ID:Kq5wZ9br
>>7 効果あったんか
9 風吹けば名無し 2026/05/23(土) 21:12:35 ID:Rs4Cm8po
>>8 これ意識するようになってからパフォーマンスが体感できるくらい変わった
10 風吹けば名無し 2026/05/23(土) 21:13:59 ID:Xv2pF6cd
use client はどこに書くのが正解や
11 風吹けば名無し 2026/05/23(土) 21:14:45 ID:Rs4Cm8po
>>10 できるだけ末端や
use client 書いたコンポーネントの子は全部 Client になるからな
12 風吹けば名無し 2026/05/23(土) 21:15:54 ID:Xv2pF6cd
>>11 ファッ
13 風吹けば名無し 2026/05/23(土) 21:17:26 ID:Rs4Cm8po
>>12 大きなコンポーネントに書くと配下全体が Client 化されて Server Component のメリットが消える
末端に書く、で安定したわ
14 風吹けば名無し 2026/05/23(土) 21:18:20 ID:Ud7gJ2nf
データフェッチはどうなん
15 風吹けば名無し 2026/05/23(土) 21:19:37 ID:Rs4Cm8po
>>14 Server Component では async/await をそのまま使える
useEffect + fetch の組み合わせ書かんでええのはシンプルで良かった
直列フェッチになってへんかだけ注意やな