Back to results for “Rendering (SSR/SSG/ISR)”
Next.js › Pages Router Data Fetching (getStaticProps, getServerSideProps & getStaticPaths)

What does getServerSideProps do, and how is it different from getStaticProps?

Beginner

Answer

getServerSideProps runs on every single request rather than at build time, fetching fresh data each time a user visits the page, which is useful for content that changes frequently or needs to be personalized based on the specific request, unlike getStaticProps which only runs once during the build.
// pages/profile.js
export async function getServerSideProps(context) {
  const user = await getUserFromSession(context.req);
  return { props: { user } };
}

export default function Profile({ user }) {
  return <h1>Welcome, {user.name}</h1>;
}
Real-world example A personalized account page uses getServerSideProps to fetch the currently logged in user's specific data fresh on every visit, since this content cannot be pre-built ahead of time for every possible user.

Common follow-ups: Does using getServerSideProps make a page slower than one using getStaticProps?;Can you access cookies and headers inside getServerSideProps?