安全に使えるユースケース

Next.jsで安全に使えるユースケースと、その理由を詳しく解説します。

SSGによる静的生成

ビルド時にHTMLを生成し、静的ファイルとして配信することで、サーバーサイドの負荷を軽減します。

実装例

// ✅ 良い例: SSGによる静的生成
export async function getStaticProps() {
  // ビルド時にデータを取得
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    // ISR: 60秒ごとに再生成
    revalidate: 60,
  };
}

export default function PostsPage({ posts }: { posts: Post[] }) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
}

なぜ安全か:

サーバー負荷の軽減: ビルド時にHTMLを生成し、サーバーサイドの負荷を軽減
パフォーマンスの向上: 静的ファイルとして配信されるため、高速に配信可能
スケーラビリティ: CDNで配信可能なため、スケーラビリティが高い

ページネーションによるデータの分割

大量のデータを一度に取得せず、ページネーションで分割して取得します。

実装例

// ✅ 良い例: ページネーションによるデータの分割
export async function getServerSideProps({ query }: { query: { page?: string } }) {
  const page = parseInt(query.page || '1', 10);
  const pageSize = 20;

  // 必要なデータのみを取得
  const res = await fetch(
    `https://api.example.com/posts?page=${page}&pageSize=${pageSize}`
  );
  const data = await res.json();

  return {
    props: {
      posts: data.posts,
      totalPages: data.totalPages,
      currentPage: page,
    },
  };
}

export default function PostsPage({
  posts,
  totalPages,
  currentPage,
}: {
  posts: Post[];
  totalPages: number;
  currentPage: number;
}) {
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
      <div>
        {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (
          <a key={page} href={`/posts?page=${page}`}>
            {page}
          </a>
        ))}
      </div>
    </div>
  );
}

なぜ安全か:

メモリ使用量の削減: 必要なデータのみを取得し、メモリ使用量を削減
レンダリングパフォーマンスの向上: DOMノード数を制限し、レンダリングパフォーマンスを向上
ネットワーク負荷の軽減: 必要なデータのみを取得し、ネットワーク負荷を軽減

動的インポートによるコード分割

必要なコンポーネントのみを動的にインポートし、バンドルサイズを削減します。

実装例

// ✅ 良い例: 動的インポートによるコード分割
import dynamic from 'next/dynamic';

// 重いコンポーネントを動的にインポート
const HeavyComponent = dynamic(() => import('../components/HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false, // サーバーサイドではレンダリングしない
});

export default function Page() {
  return (
    <div>
      <h1>Page</h1>
      <HeavyComponent />
    </div>
  );
}

なぜ安全か:

バンドルサイズの削減: 必要なコンポーネントのみをバンドルに含める
初回ロード時間の短縮: バンドルサイズが削減され、初回ロード時間が短縮
メモリ使用量の削減: 必要なコンポーネントのみをロードし、メモリ使用量を削減

まとめ

安全に使えるユースケースのポイント：

SSGによる静的生成: ビルド時にHTMLを生成し、サーバーサイドの負荷を軽減
ページネーションによるデータの分割: 大量のデータを一度に取得せず、ページネーションで分割
動的インポートによるコード分割: 必要なコンポーネントのみを動的にインポート

これらのユースケースを守ることで、安全で信頼性の高いNext.jsアプリケーションを構築できます。