getServerSideProps for Data Fetching in Next.js

In Next.js getServerSideProps fetches data on each request, making it ideal for real-time content like dashboards or personalized pages.

Using this approach allows for better scalability, flexibility, and efficiency in your applications. It helps in organizing code, improving performance, and ensuring seamless content updates.

Using getServerSideProps

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await res.json();


  return { props: { post: data } };
}


export default function Post({ post }) {
  return <h1>{post.title}</h1>;
}

Conclusion

Use getServerSideProps when you need fresh data on each request, ensuring your content is always up-to-date.