[Discussion] Store hydration during streaming SSR?

[tobias-tengler]

I'm exploring @defer and streaming SSR and was wondering what the store hydration story would look like? What would be the best way to stream the incremental GraphQL responses to the client in such a manner that the store is hydrated, before the actual HTML of the streamed-in Suspense tree is being hydrated and the Relay queries/fragments re-evaluated?

I've played around with getting the payloads to the client in https://github.com/tobias-tengler/nextjs-relay-streaming-ssr, but ultimately I wasn't successful in writing the payloads to the store on the client, as the store always requires an operation descriptor. I thought about wrapping the query hooks and getting a handle on the operation descriptor that way, but it feels very wrong 😅

I would be very interested to know how Meta has solved this problem (at a high level) and whether there are React / Relay APIs that could be leveraged here. Since there seems to be a collaboration going on between Meta's React/Relay team and Vercel maybe you can already give some Next.js specific advice, as I'm sure your internal Fizz setup is somewhat different from the one in Next.js.

[tobias-tengler]

Managed to build a working proof-of-concept: https://github.com/tobias-tengler/nextjs-relay-streaming-ssr

Still happy about any input or other takes :)