Next.jsでのデータの取得方法

静的生成 (Static Generation): Next.jsでは、ビルド時に事前にデータを取得し、静的なHTMLファイルとして生成することができます。これにより、リクエストごとにデータを取得する必要がなくなり、パフォーマンスが向上します。

例:

import React from 'react';
export async function getStaticProps() {
  // データの取得処理
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return {
    props: {
      posts,
    },
  };
}
function Blog({ posts }) {
  // 取得したデータの利用
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
export default Blog;

サーバーサイドレンダリング (Server-side Rendering): Next.jsでは、リクエストごとにデータを取得してページをレンダリングすることもできます。これにより、動的なコンテンツや個別のユーザー情報を表示する際に便利です。

例:

import React from 'react';
export async function getServerSideProps() {
  // データの取得処理
  const data = await fetch('https://api.example.com/posts');
  const posts = await data.json();
  return {
    props: {
      posts,
    },
  };
}
function Blog({ posts }) {
  // 取得したデータの利用
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
export default Blog;

クライアントサイドレンダリング (Client-side Rendering): Next.jsでは、クライアントサイドでデータを取得してレンダリングすることもできます。これにより、ページの読み込み後にデータを取得するための追加のリクエストが発生します。

例:

import React, { useEffect, useState } from 'react';
function Blog() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    // データの取得処理
    fetch('https://api.example.com/posts')
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);
  // 取得したデータの利用
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}
export default Blog;

これらは、Next.jsでデータを取得するための一般的な方法のいくつかです。どの方法を選択するかは、プロジェクトの要件やパフォーマンスのニーズによって異なります。適切な方法を選ぶことで、効率的でパフォーマンスの高いアプリケーションを構築することができます。