I could - but with React Query's automatic streaming provider the DX is so much better just doing it in the client component directly.

There are multiple ways of doing this, but for certain stuff it's just as good to do the fetch in the client component with better dx of not having to fetch in multiple places and passing props around...

There are any number of reasons why react-query might be preferred for SSR data loading over awaiting in an RSC. This failing to be possible is incredibly frustrating

That'd be the ultimate DX.

it's a different paradigm. Here, the fetch only happens in server components, and you need to explicitly trigger it there for queries to pick that up in client components. That's a good pattern and something we want to support, too.

However, the other approach we want to support is not write anything in server components, and leverage useSuspenseQuery in a client component to also trigger fetches during the SSR run, which would then automatically prefill the cache on the client.

That works, except that headers (and thus cookies) aren't available during SSR in client components.

I understand that just accessing cookies in client components would leak them to the client, which is non wanted. Instead, an isomorphic way to read headers that would:

• always work in server components
• work in client components during SSR run
• be a noop when executed in the browser

would be nice, and has been suggested by @cramforce on twitter, too:

https://x.com/cramforce/status/1794440746210410885

Can you share an example? I haven't been able to get custom AsyncLocalStorage stores to work inside React components.

that's interesting

Can you share an example? I haven't been able to get custom AsyncLocalStorage stores to work inside React components.

i use it in a big project with custom server, so i can only show you brief steps about it, maybe i will use this solution in my project in the future. example:

const ASL_STORE_SERVER_KEY = 'asyncstorage-server@context';
globalThis[ASL_STORE_SERVER_KEY] = new AsyncLocalStorage();

const nextApp = next({});
const server = express();

const startServer = async function (port, isProduct) {
  await nextApp.prepare();
  const routerPath = 'some path';
  server.get(routerPath, async (req, res) => {
    const envObj = {
      req
    };
    globalThis[ASL_STORE_SERVER_KEY].run(envObj, () => {
      nextApp.render(req, res, '/some page', {});
    });
  });
  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
}

// use this function to get req object in client component
function getReq() {
  if (typeof window !== 'undefined') {
    return null
  }
  return globalThis[ASL_STORE_SERVER_KEY].getStore()?.req || {}

}

startServer(3000, true);

it seems that the function 'header' and 'cookie' in nextjs also use AsyncLocalStorage, but nextjs only make them valid in RSC, i use the solution above to use req in client component. since i wrapped the render process in AsyncLocalStorage, so i'm not sure it can work without custom sever?