react-query-next-experimental's ReactQueryStreamedHydration, no way to fetch on server side components?

[FezVrasta]

I was looking at the new ReactQueryStreamedHydration examples, but it looks like the idea is to always fetch data from a client side component, never from a server one.

How can I have a server side component fetch some data, render it on the client, and send the cache to the client so that client side queries can make use of it?

One approach I can think of is the following:

// app/page.tsx
"use server";

export const Page = () => {
  const queryClient = new QueryClient();
  
  const data = await queryClient.fetchQuery({
    queryKey: ['test'],
    queryFn: async () => (await fetch('https://example.org/api/test')).json()
  });

  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryStreamedHydration>
        <h1>{data.title}</h1>
        <ClientSideComponent />
      </ReactQueryStreamedHydration>
    </QueryClientProvider>
  );
}

// components/client-side-component.tsx
"use client"

export const ClientSideComponent = () => {
  // this should not trigger a network request as the same resource was
  // already loaded by the server
  const { data } = useSuspenseQuery({
    queryKey: ['test'],
    queryFn() => (await fetch('https://example.org/api/test')).json(),
  });

  return <p>{data.body}</p>;
}

This should allow to share the cache between the client and the server.

I just don't understand why all of this has not been explored or documented anywhere?