How to fetch data on server-side for dynamic routes in Next.js?

[kaiden-araki]

Summary

Hi everyone,

I’m building a Next.js app with dynamic routes (e.g., /posts/[id]) and I want to fetch data for each post on the server side.

I’m trying to use getServerSideProps to fetch data based on the post ID from the URL.

Here is a simplified version of my code:

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

  return {
    props: { post },
  };
}

export default function PostPage({ post }) {
  return <div>{post.title}</div>;
}

However, I’m not sure if this is the best way to handle data fetching for dynamic routes, or if I should use getStaticProps with getStaticPaths instead.

Could someone please explain the differences and recommend the best approach for fetching data in dynamic routes?

Thanks a lot!

Additional information

No response

Example

No response

[elias-winberg]

Your code with getServerSideProps is fine if the data changes a lot or you need it fresh on every visit.

Use getStaticProps + getStaticPaths if your posts don’t update often — Next.js will pre-build the pages at build time, so they load super fast.

Quick rule of thumb:
Blog posts, docs, marketing pages → getStaticProps.
User dashboards, real-time stats → getServerSideProps.