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

[longprao]

I'm using react-query but open to any other pattern. I have asked in the react-query repository but did not have a good answer.

Expected:

• Initial/first load when we enter the app, the data should be loaded on the server. OK.
• Subsequence client navigation (via Next Link or router.push), data should be loaded on the client (useQuery or fetch in useEffect), it should not wait for server trip. NOT OK.
• 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. Somewhat OK, but:
• Navigating back (via Next Link or router.push, NOT browser back) in pages with generateMetadata() should be instant. generateMetadata() should not run again. NOT OK.

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:

const getData = cache((id: string) => fetch(...))

export async function generateMetadata({ params }: Props, parent: ResolvingMetadata): Promise<Metadata | null> {
  const id = (await params).id

  const data = await getData(id)

  const previousImages = (await parent).openGraph?.images || []

  return {
    title: data.brand.name,
  }
}

export default async function Page() {
  const id = (await params).id
  const queryClient = getQueryClient()

  await queryClient.prefetchQuery({
      queryKey: [QK_KEY],
      queryFn: () => getData(id),
  })

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

With this setup it will hit the server and wait for data fetching all the time (unless visited, or prefetched), which is a slow navigation experience. How to detect whether it's the first load?

In general, we have been maintaining many react apps with Pages Router. We are exploring moving to App Router, but only if it could guarantee the same performance and user experience. Especially we are using getInitialProps a lot, and looking to have the same functionality (unless it is wrong?).