【悲報】ワイ、App Router に半月溶かす

1 風吹けば名無し 2026/06/25(木) 21:04:00 ID:Ap7Ro2tr
Pages Router でええやんと思っとったんやけど、新規案件で App Router 使うことにしたわ
最初の一週間は「なぜこれが動かんのか」をひたすら調べとった

2 風吹けば名無し 2026/06/25(木) 21:05:23 ID:Ke3wF9ub
何にハマったんや

3 風吹けば名無し 2026/06/25(木) 21:06:08 ID:Ap7Ro2tr
>>2 Server Component にイベントハンドラ書けんのや
onClick 書いた瞬間に「Client Component にしてください」て言われる

4 風吹けば名無し 2026/06/25(木) 21:07:16 ID:Ke3wF9ub
>>3 そらそうやろ

5 風吹けば名無し 2026/06/25(木) 21:08:47 ID:Ap7Ro2tr
>>4 頭ではわかっとってもな
どこを Server にしてどこを Client にするか、設計段階で考えとかんと後から直すのがしんどい

6 風吹けば名無し 2026/06/25(木) 21:09:40 ID:Xu8bG4nd
実際どう分けたんや

7 風吹けば名無し 2026/06/25(木) 21:10:56 ID:Ap7Ro2tr
データ取得はサーバー、インタラクションが要るとこだけ Client や

// サーバー側でデータ取得
// app/posts/page.tsx (Server Component)
export default async function PostsPage() {
  const posts = await fetchPosts(); // サーバーで実行
  return <PostList posts={posts} />;
}

// インタラクションが必要な部分だけ Client に
// components/PostList.tsx
'use client';
export function PostList({ posts }) {
  const [filter, setFilter] = useState('');
  ...
}

8 風吹けば名無し 2026/06/25(木) 21:11:34 ID:Xu8bG4nd
>>7 use client を末端に寄せる感じか

9 風吹けば名無し 2026/06/25(木) 21:12:35 ID:Ap7Ro2tr
>>8 せや

10 風吹けば名無し 2026/06/25(木) 21:13:59 ID:Mv2hJ6ql
で、半月かけた甲斐はあったんか

11 風吹けば名無し 2026/06/25(木) 21:14:45 ID:Ap7Ro2tr
>>10 あったで
「サーバーで取れるもんはサーバーで取る」って意識になったらクライアントの JS バンドルが小さくなった
ページ表示速度も計測したら体感と一致しとった

12 風吹けば名無し 2026/06/25(木) 21:15:54 ID:Mv2hJ6ql
>>11 数字で出ると気持ちええな

13 風吹けば名無し 2026/06/25(木) 21:17:26 ID:Ap7Ro2tr
Pages Router より設計の自由度が上がった分、考えることは増えたわ
それを面倒と取るか、適切な制御ができると取るかで評価変わる気がする

14 風吹けば名無し 2026/06/25(木) 21:18:20 ID:Ke3wF9ub
ワイはまだ Pages でええわ

15 風吹けば名無し 2026/06/25(木) 21:19:37 ID:Ap7Ro2tr
>>14 それも正解や