Next.js の高度なデータ取得テクニック

Next.js での高度なデータ取得

Next.js は、サーバー側レンダリング (SSR)、静的サイト生成 (SSG)、クライアント側データ取得など、アプリケーションでデータを取得するための強力な機能を提供します。これらのテクニックを活用することで、シームレスなユーザー エクスペリエンスを提供する、パフォーマンスが高くスケーラブルなアプリケーションを構築できます。このガイドでは、Next.js の高度なデータ取得テクニックを探索し、それらをプロジェクトに実装する方法を示します。

サーバーサイド レンダリング (SSR)

例: getServerSideProps の使用

// pages/post/[id].js
export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

静的サイト生成 (SSG)

Next.js での静的サイト生成により、ビルド時にページを事前レンダリングできるため、コンテンツが静的であり、CDN から直接提供できることが保証されます。これにより、パフォーマンスが大幅に向上し、サーバーの負荷が軽減されます。

例: getStaticProps の使用

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

const HomePage = ({ posts }) => {
  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default HomePage;

増分静的再生 (ISR)

Next.js の増分静的再生成により、サイト全体を再構築せずに静的コンテンツを更新できます。これは、ニュース記事やブログ投稿など、頻繁に更新する必要があるページに役立ちます。

例: getStaticProps と revalidate の使用

// pages/posts/[id].js
export async function getStaticProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
    revalidate: 60, // Revalidate the page every 60 seconds
  };
}

const PostPage = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export default PostPage;

クライアント側のデータ取得

Next.js はクライアント側のデータ フェッチもサポートしており、最初のページ読み込み後にデータをフェッチできます。これは、最初のレンダリングに必要のないデータを取得したり、データの読み込みが必要なユーザー操作を処理したりする場合に役立ちます。

例: クライアント側のデータ取得に useEffect と useState を使用する

import { useEffect, useState } from 'react';

const PostsPage = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch('https://api.example.com/posts');
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default PostsPage;

データ取得方法の組み合わせ

多くのアプリケーションでは、パフォーマンスとユーザー エクスペリエンスを最適化するために、さまざまなデータ取得方法を組み合わせる必要がある場合があります。たとえば、最初のページ読み込みには SSR または SSG を使用し、追加データやユーザー インタラクションにはクライアント側でのフェッチを使用できます。

例: SSR とクライアント側フェッチの組み合わせ

// pages/user/[id].js
import { useEffect, useState } from 'react';

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await fetch(`https://api.example.com/users/${params.id}`);
  const user = await res.json();

  return {
    props: {
      user,
    },
  };
}

const UserPage = ({ user }) => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await fetch(`https://api.example.com/users/${user.id}/posts`);
      const data = await res.json();
      setPosts(data);
      setLoading(false);
    };

    fetchPosts();
  }, [user.id]);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>

      <h2>Posts</h2>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          {posts.map((post) => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default UserPage;

クライアント側のフェッチに SWR を使用する

SWR (stale-while-revalidate) は、データフェッチ用に Vercel によって作成された React フック ライブラリです。キャッシュ、再検証、フォーカス追跡などの機能を提供し、クライアント側のデータ取得をより効率的かつ強力にします。

例: SWR を使用する

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const SWRPostsPage = () => {
  const { data, error } = useSWR('https://api.example.com/posts', fetcher);

  if (error) return <p>Error loading posts.</p>;
  if (!data) return <p>Loading...</p>;

  return (
    <div>
      {data.map((post) => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default SWRPostsPage;

結論

Next.js は、さまざまなユースケースやパフォーマンス要件に対応するさまざまなデータ取得手法を提供します。 SSR、SSG、ISR、およびクライアント側のデータ取得を理解して活用することで、優れたユーザー エクスペリエンスを提供する強力で高性能な Web アプリケーションを構築できます。これらのテクニックを効果的に組み合わせることで、速度と SEO の両方に関して Next.js アプリケーションを最適化し、ユーザーに可能な限り最高のエクスペリエンスを提供することができます。

以上がNext.js の高度なデータ取得テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。