What is getServerSideProps and when should you use it?

getServerSideProps is a Pages Router function that fetches data on every request at runtime and renders the page with it. The props it returns go to the page component.

export async function getServerSideProps(context) {
  const { req, res, params, query } = context;
  
  const data = await fetch(`https://api.example.com/user/${params.id}`);
  const user = await data.json();
  
  return {
    props: {
      user,
    },
  };
}

The context argument holds the request and response, the route params and the query string. On client-side navigation, Next.js calls the server to run it and gets the props back as JSON.

Use it when data changes frequently, requires authentication, or needs request-specific information. Every request waits for the server, so for data that can be cached, getStaticProps serves a prerendered page faster.