I am currently learning about next js and I have a few questions in mind. These are not real projects I am working on but just examples.

Let's say I have my frontend app running on 'example.com' and an api server 'api.example.com'. The api is using normal session-cookie authentication for the spa.

I have a page called pages/projects which shows the user's current project, now for ssr should the server just pre-render a loading state of the page and let the client fetch the data from the api? Or should I use the user cookies and query the api during ssr in order to load the completed version of the page?

const Page: NextPage<Props> = ({ projects }: Props) => {
  return(
    <>
      {projects.map((project) => {
        // render out ProjectItem component.
      })}
    </>
  )
}

Page.getInitialProps = async (context) => {
  if (context.req) {
    // fetch data using the user's cookies
  } else {
    // fetch data on client side 
  }
  // the part above could be abstracted to be reused.
  return {
    projects: result.data
  }
}

export default Page

Or stick to useEffect and just pre render a loading page? This only concerns the first page load, as navigating to it through next/link will make the client directly contact the api so is that the right thing to do also in the first load? Thanks in advance!