Next.jsデータ取得完全ガイド1：概要と基本概念

📅

loading..🐩🐩🐩🐩

はじめに 🔗

Next.js 15を基準にしています。以降のバージョンでは、一部の内容が変わる場合があります。

Next.jsのApp Routerは最新のReact機能と連携し、サーバー中心のデータ取得を提供します。

より効率的で高速なウェブアプリケーションを構築できます。

このシリーズでは、基本から応用まで詳しく学びます。

第1回では次の内容を扱います。

App Routerでデータを取得する場所
fetchの動作
Server Componentsを中心とするデータフロー
fetchの基本例

データ取得の概要 🔗

App RouterはReactのServer Components（SSR）を基盤としています。

ブラウザーで使えないサーバー専用の機能を利用でき、データ取得もその一つです。

Next.jsは基本的に

サーバーでデータを取得する方法

を推奨します。

クライアントへ渡すHTMLを事前に完成させるため、読み込み速度とSEOに有利です。

いつ、どこで取得するか 🔗

取得できる場所は次のとおりです。

Server Components（既定）
：大部分のデータは、ここから取得することが推奨されます。
Client Components
：ユーザーの操作後など、動的に取得する必要がある場合に使います。
Route Handler（API route）
：バックエンドAPIとして外部システムと通信します。
App Routerはフォルダー基準のルーティングなので、app/内のコンポーネントファイルで取得します。

fetchの基本 🔗

Next.jsでよく使う取得関数がfetchです。

ブラウザー標準のfetchとほぼ同じですが、Next.jsでは特別な動きをします。

JSONPlaceholderから記事を取得する例です。

app/page.tsx

export default async function Page() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Server Componentsで動作し、HTMLを描画する前にデータを取得します。

クライアントで取得して読み込み表示を出す方式より、速く安定したユーザー体験を提供します。

fetchの動作と特徴 🔗

Next.jsのfetchには、次の特徴があります。

自動キャッシュ：既定では、同じ要求のfetch結果をキャッシュします。
無効化可能：設定でキャッシュを切れます（cache: 'no-store'）。
ISR対応：一定時間ごとの更新を指定できます（next.revalidate）。

これらの設定は次回詳しく説明します。

まとめ 🔗

Next.jsのデータ取得の仕組み、実行場所、fetchの基本を学びました。

Server Componentsでデータを事前に描画する方法は、性能とSEOの両方に利点があります。

次回はfetchの高度な設定、キャッシュ、ISRを紹介します。

さらに考える 🔗

Server Componentsはどのように動作し、Client Componentsとどう区別されるでしょうか。
サーバーでの取得は、なぜクライアント側より有利なのでしょうか。

参考 🔗

Next.jsデータ取得完全ガイド1：概要と基本概念 | PromleeBlog