How to prefetchQuery on the server only on the first load in Nextjs App Router?

[longprao]

Expected:

• Initial/first load when we enter the app, the data should be loaded on the server (SSR for SEO purpose etc...).
• Subsequence client navigation (via Next Link or router.push), data should be loaded on the client (useQuery), it should not wait for server trip.
• Navigating back (via Next Link or router.push, NOT browser back), data should be available instantly (since it was loaded before), it should not wait for server trip.

Previously in Pages Router, it was achieved using getInitialProps, like so:

Index.getInitialProps = async (ctx) => {
  const queryClient = new QueryClient()

  // this is to query only on first load
  const isFirstServerCall = ctx.req?.url?.indexOf('/_next/data/') === -1

  if (isFirstServerCall) {
    await Promise.all([
      queryClient.prefetchQuery({
        queryKey: [QK_KEY],
        queryFn: fetchData()...,
      }),
    ])
  }

  return {
    dehydratedState: dehydrate(queryClient),
  }
}

In App Router, based on the docs, this is the only way to query data on the server:

https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr

export default async function Page() {
  const queryClient = getQueryClient()

  await queryClient.prefetchQuery({
      queryKey: [QK_KEY],
      queryFn: fetchData()...,
  })

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <LandingPage />
    </HydrationBoundary>
  )
}

With this setup it will hit the server and wait for data fetching all the time, which is a slow navigation experience. How to detect whether it's the first load? Or return cached data instantly?

[TkDodo]

you can not await the prefetching and stream the promise to the client cache. That’s kinda the best of both worlds. or you can persist the queryCache on the server, in which case prefetchQuery would give you data back immediately if its not stale.