How can we prefetch on the server and resume on the client?

[eglove]

Sorry if this is in the documentation, it seems like this should be doable but some pages in the documentation feel like they're either missing information or missing links to information.

Is there a way to prefetch a query on the server, then hydrate it on the client? Similar to what TanStack Query does here for prefetchQuery. https://tanstack.com/query/v4/docs/react/guides/ssr

I have been trying a few things such as manually setting the cache and counting on the React hook to read from that initially. Or adding initialData: client.cache.storage.get() (after setting it at the page level) But in every case, the data is initially null until it's refetched. I'd basically like to avoid Content Layout Shifts and hydration errors.

[eglove]

It looks like there's no way to set the cache before the page is initialized, but I can read from NEXT_DATA directly. I'm not super-confident in this, but it is what I'm going for.

  const { data } = useFetch(getTodos, {
    initialData: {
      data:
        typeof document === 'undefined'
          ? null
          : JSON.parse(document.querySelector('#__NEXT_DATA__').textContent)
              .props.pageProps.data,
    },
  });

Abstracting this out to use cache keys, I can do:

export function getNextPageProperties<T>(cacheKey: string) {
  if (typeof document === 'undefined') {
    return;
  }

  const element = document.querySelector('#__NEXT_DATA__');

  if (isNil(element)) {
    return;
  }

  const content = element.textContent;

  if (isNil(content)) {
    return;
  }

  return JSON.parse(content).props.pageProps[cacheKey] as T;
}

export const getServerSideProps = async () => {
  const { data } = await getTodos.send();

  return { props: { [getTodos.cacheKey]: data } };
};

  const { data } = useFetch(getTodos, {
    initialData: {
      data: getNextPageProperties<Todo[]>(getTodos.cacheKey),
    },
  });