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 (
    

      
{post.title}
      
{post.body}
    
  );
};

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 (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default HomePage;

増分静的再生 (ISR)

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

例: revalidate での getStaticProps の使用

// 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 (
    

      
{post.title}
      
{post.body}
    
  );
};

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 
Loading...
;
  }

  return (
    

      {posts.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

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 (
    

      
{user.name}
      
{user.email}

      
Posts
      {loading ? (
        
Loading...
      ) : (
        

          {posts.map((post) => (
            

              
{post.title}
              
{post.body}
            
          ))}
        
      )}
    
  );
};

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 
Error loading posts.
;
  if (!data) return 
Loading...
;

  return (
    

      {data.map((post) => (
        

          
{post.title}
          
{post.body}
        
      ))}
    
  );
};

export default SWRPostsPage;

結論

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