Get help on Discord

How to use GetInitialProps and GetServerSideProps in Next.js

1 replies
Last updated: Jun 23, 2021
Hey guys, can someone please advice. I recently started working with Next.js. Works perfect with Sanity really easy to fetch data and to create dynamic routes. Now I would like to know can someone please advice what to use if I have to fetch data with “getInitialProps” and “getServerSideProps” it really confuses me. On the Next.js website it’s recommend to use the getInitialProps all all time. Which one to use?
Thanks
😄
AI Update

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.

Show original thread
1 reply
Hi Nino. 
getInitialProps
is still supported but was effectively replaced by 
getStaticProps
and 
getServerSideProps
. I’d recommend using the latter two instead.
There are many ways you can approach it, but I tend to put my fetches in an api file (/lib/api.js) and import that where it’s needed. That api.js file will import a configured Sanity client and might look like:


export async function getPostsByName(name) {
  const result = await client.fetch(
    `*[_type == "post" && involved[]->slug.current match $name] | order(date desc) {
        title,
        'impacts': impacts[]->,
        featured,
        date,
        excerpt,
        'slug': slug.current,
        'coverImage': image,
      }`,
    { name }
  );

  return result;
}

export async function getAllPosts() {
  const result = await client.fetch(
    `*[_type == "post"] | order(date desc, _updatedAt desc) {
      title,
      'impacts': impacts[]->,
      featured,
      date,
      excerpt,
      'slug': slug.current,
      'coverImage': image,
    }`
  );

  return result;
}

export async function getStaffBySlug(slug) {
  const result = await client.fetch(
    `*[_type == "staff" && slug.current == $slug] {
      firstName,
      lastName,
      'department': department->name,
      position,
      image,
    }`,
    { slug }
  );

  return result;
}
Then in a page, you’ll use 
getStaticProps
or 
getServerSideProps
to fetch your data by calling your functions. If you’re using 
getStaticProps
, you might also use 
getStaticPaths
to specify dynamic routes.
Whichever you use determines whether you are fetching at build time or run time. The 
get…Props()
functions can return a props object that gets passed into your page component. From there, you will use that props object to construct your page.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?