Next.js App Routerでのパフォーマンス最適化：Server Componentsを活用する

01はじめに

Next.js App RouterのServer Componentsを正しく活用することで、クライアントサイドのJavaScriptバンドルサイズを削減し、 初期表示速度を大幅に改善できます。本記事では実際のプロジェクトで効果があったテクニックを紹介します。

02Server Componentsの基本的な使い方

デフォルトでApp Router内のコンポーネントはServer Componentsです。 データフェッチはコンポーネント内で直接行えます。

// Server Component（デフォルト）
export default async function BlogList() {
  const posts = await fetchPosts(); // サーバーサイドで実行
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

03Streamingで体感速度を改善する

Suspense を使ったStreamingにより、 遅いデータが来る前に他の部分を先に表示できます。

import { Suspense } from "react";

export default function Page() {
  return (
    <div>
      <h1>ダッシュボード</h1>
      <Suspense fallback={<Skeleton />}>
        <SlowDataComponent />
      </Suspense>
    </div>
  );
}

04キャッシュ戦略の最適化

Next.js 14以降、fetch のキャッシュ動作が変更されました。 用途に応じて適切なキャッシュ設定を行いましょう。

// 静的データ（ビルド時にキャッシュ）
const data = await fetch(url, { cache: "force-cache" });

// 動的データ（毎リクエスト再取得）
const data = await fetch(url, { cache: "no-store" });

// 時間ベースの再検証
const data = await fetch(url, { next: { revalidate: 3600 } });

05まとめ

Server Components・Streaming・適切なキャッシュ戦略を組み合わせることで、Core Web Vitalsのスコアを大幅に改善できます。 弊社ではNext.js / React を用いたWebアプリ開発・パフォーマンス改善も承っています。