Tweak Next 13 demo loading

[alvarlagerlof]

I experimented with trying to make the demo work for my usecase. I needed to be able to server render full content while still being able to use Relay features after initial server load.

Much of the work had already been done (thank you @alunyov), so it only took a few twaks in the end to get it working (but some time).

I have a few observations and questions:

• It looks to be doable without modifications to Relay itself.
• Using usePreloadQuery in <Suspense>seems to always cause hydration errors. Probably returns something other than the data on the first render. Although this is only true client-side.
• Should usePreloadQuery be wrapped with <Suspense> in the first place?
• Is there a reason not to define <RelayEnvironmentProvider>in layout.tsx?

Other than that I think looking at the commit messages in this PR will explain the changes I've made.

Some are just to demonstrate that thet changes are working, and I expect to remove them before this PR is considered for merging.

[alvarlagerlof]

I am thinking: While this does work, and is server rendered, there is only server components on the top layer. In some ways this is already good considering you do get the code maintainability of Relay fragments. Also lacking many of the potential network transfer improvements of RSC.

I think I'd want to be able to specify fragments in server components even further down, possibly only going to server components at the edges of things.

If I imagine a shopping site and the "add to cart button" is the only one that is a server component for example. Then maybe only that one could be updatable (without reloading the whole page). That would lean more heavily into RSC, but I don't know if that is possible right now. One problem is probably how to pass just the cart button data to the store, since all of its parents are in server components. Maybe something is possible with createServerContext?

But then again I don't know if that is something you'd want. Relay does give the ability to fetch a lot of a page at once, which is one thing that server components lets you split up.

I could also think that somehow combining RSC with @stream might be very interesting, and not something you could do with "use client" (while keeping the SEO/server rendered benefits).

[davidmccabe]

Alvar, thank you so much for jumping in and putting this together! It's incredible to see you go from 'interested' in your first tweet to moving things forward in a PR a day or two later.

Still catching up on understanding this thread, stay tuned

[alunyov]

@alvarlagerlof thanks for looking into this. I also spent some time thinking about how we can evolve this integration: https://github.com/relayjs/relay-examples/pull/269 - please let me know what do you think.

[alvarlagerlof]

Might want to remove the refetch button.