Next.js Data Fetching

Different ways to fetch data in Next.js.

getServerSideProps (SSR)

Runs on every request:

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

  return { props: { posts } };
}

export default function Posts({ posts }) {
  return (
    <div>
      {posts.map(post => <p key={post.id}>{post.title}</p>)}
    </div>
  );
}

getStaticProps (SSG)

Runs at build time:

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

  return {
    props: { posts },
    revalidate: 60 // Regenerate every 60 seconds
  };
}

getStaticPaths

For dynamic routes:

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

  const paths = posts.map(post => ({
    params: { id: post.id.toString() }
  }));

  return { paths, fallback: false };
}

Remember

• SSR: Fresh data every request
• SSG: Fast, static pages
• ISR: Regenerate periodically
• Choose based on needs

Next: Learn Next.js API routes!