getInitialProps vs getServerSideProps in Next.js with Sanity

I need to clarify something important: the Next.js documentation actually does not recommend using getInitialProps for most cases anymore. In fact, it's the opposite! Let me break down the differences:

getServerSideProps is the modern, recommended approach for server-side rendering. It only runs on the server side, never on the client, which means:

• Better security (API keys and sensitive data stay on the server)
• Smaller bundle sizes (the code doesn't ship to the browser)
• Cleaner separation of concerns
• Better performance

getInitialProps is the legacy method that runs on both server and client side. It's mainly kept for backward compatibility and should only be used when you need that specific behavior (which is rare). The Next.js team recommends against using it in new projects.

For your Sanity + Next.js setup, here's what to use based on your needs:

Use getStaticProps (most common for Sanity):

export async function getStaticProps() {
  const data = await client.fetch(query)
  return { props: { data }, revalidate: 60 } // ISR with revalidation
}

This is ideal for content that doesn't change constantly. You can combine it with Incremental Static Regeneration (ISR) for the best of both worlds - static speed with content freshness.

Use getServerSideProps when you need:

• Real-time data on every request
• Access to request headers/cookies
• User-specific content

export async function getServerSideProps(context) {
  const data = await client.fetch(query)
  return { props: { data } }
}

Avoid getInitialProps unless you have a very specific edge case or are maintaining legacy code.

For most Sanity content sites, getStaticProps with ISR gives you the best performance and user experience! Your pages load instantly (static), but content stays fresh through revalidation. Only reach for getServerSideProps when you truly need real-time data on every single request.