Client side data preparation

[alex-statsig]

What's the best way to prime client-side data loading in nextjs? I'm pretty excited by React 18's concurrent rendering and suspense. A big part of this is data loading with suspense, and starting your data loading before rendering. For example, with relay calling loadQuery on transition to a page instead of during its first render, then using usePreloadedQuery in the render. However, I couldn't find a good place to call loadQuery with next.js. If there was a simple getClientsideProps called before page renders I could use that (or some kind of router hooks that could be integrated nicely with page metadata).

An ideal setup would be for the router to prioritize loading this data preparation function and call that right away, then worry about getting the components downloaded after.

Has anyone else found a solution to this? Is this something nextjs will address as Suspense / concurrent mode get more adopted?

[rsmelo92]

We are also dealing with this problem
The one solution we tried that worked is calling the loadQuery on getServerSideProps but this warning is triggered

Warning: usePreloadedQuery(): usePreloadedQuery was passed a preloaded query that was created with a different environment than the one that is currently in context. In the future, this will become a hard error.

Still trying to find the correct place to call the loadQuery though just like you 😢

Code for reference

export function getServerSideProps() { 
  // Triggers Warning: usePreloadedQuery(): usePreloadedQuery was passed a preloaded 
  // query that was created with a different environment than the one that is 
  // currently in context. In the future, this will become a hard error.
  const environment = initEnvironment();
  const unparsedQueryReference = loadQuery(environment, query)
  const queryReference = JSON.parse(JSON.stringify(unparsedQueryReference))

  return { 
    props: { 
      queryReference,
      initialRecords: environment.getStore().getSource().toJSON()
    } 
  }
}

[alex-statsig]

@rsmelo92 Yeah getServersideProps doesn't work because loadQuery just kicks off a network request and lets you use that network request later. So it needs to run on the client, as early as possible; not on the server

Separate from this its possible to fully execute the query on the server, and serialize that to the client, but that's a pretty different feature which fully blocks your page

[nick-kang]

We were also doing the same thing as you guys with usePreloadedQuery. A better solution is to use useLazyLoadQuery instead. facebook/relay#3449 (comment)

[alex-statsig]

We ended up settling on that as well, but it would great if there was a first class way to work with suspense as intended (start data fetches before render, not during).