Next.js の App Router と半月向き合った結果

Pages Router でいいじゃないかと思っていた時期がありました。

新しいプロジェクトで App Router を使うことにしました。Server Components、Client Components、use client ディレクティブ、キャッシュの扱い——最初の一週間は「なぜこれが動かないのか」をひたすら調べていました。

混乱した点

Server Component にはイベントハンドラが書けません。onClick を書いた瞬間に「Client Component にしてください」と言われます。どこを Server にしてどこを Client にするか、設計段階で考えないと後から修正が面倒でした。

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

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

慣れた後

「サーバーで取れるものはサーバーで取る」という意識になると、クライアントの JS バンドルが小さくなります。ページ表示速度が改善されて、計測してみると体感と一致しました。

Pages Router より設計の自由度が上がった分、考えることが増えます。それを面倒と取るか、適切な制御ができると取るかで評価が変わる気がします。