Best way to run server-side rendering only once in Nextjs

Question

I have an app that will use Javascript for data-handling. I only need one single server call and would like it to be done in a SSR Page as the data call on the client takes awhile.

How would this be properly done today?

I have actually tried almost everything I could come up with online and couldn't find a proper solution. Maybe I'm missing something?

Answer 1

You would use getStaticProps, which would load the API once.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

Documentation: https://nextjs.org/docs/basic-features/data-fetching