relay-nextjs incompatible with new Next.js concurrentMode support

[pmualaba]

Setting concurrentFeatures: true in next.config.js breaks relay-nextjs because of the use of getInitialProps in _document.tsx see also https://github.com/vercel/next.js/issues/31675

Will relay-nextjs support the latest and coming versions of Next.js with concurrentFeatures enabled? Or is there a workaround for now in the meantime?

this is my next.config.js:

[rrdelaney]

I haven't worked on updating this library for Next.js's concurrent features mode because Relay itself is currently incompatible. Once https://github.com/facebook/relay/pull/3646 is merged I'll be unblocked, but for the time being it's an upstream issue.

[pmualaba]

Super, thanks! BTW, for the global context issue in Relay, there is also a 1-liner way to make it work in Next.js (without touching Relay)

Add context.global = context in node_modules/next/dist/server/web/sandbox/context.js

Then booting next.js server with --port 4200 --hostname localhost flags successfully runs in concurrent features mode. But then Next.js bails out of getInitialProps() in _document.tsx, which then breaks relay-nextjs...

Is there a way to run createRelayDocument() outside of getInitialProps() ?

relay-nextjs is the best solution for Next SSR + Relay i could find, so i really hope we could make it work in concurrent features mode, especially for ServerSide/Isomorphic Suspense :-)

[FINDarkside]

especially for ServerSide/Isomorphic Suspense :-)

I'd just like to point out that you can use Suspense server side without concurrent features. Doesn't really help if you want to use SSR streaming or if you want to actually wait for some suspending action while doing SSR. But when using relay-nextjs your useFragment and usePreloadedQuery calls won't suspend since the data is ready, meaning that it will be rendered server side, while on client side you can provide custom fallbacks with Suspense instead of relying on the suspense that relay-nextjs wraps your whole page with. Suspending components would then just render the fallback on server side. Not sure if that's enough for your needs, but I've upgraded to React 18 over a month ago just to be able to use Suspenses normally in our code.

[rrdelaney]

@FINDarkside Yea what this library will do when Suspense and concurrent are mainstream is still up in the air, there might even be a good chance it can just be replaced by usePreloadedQuery. When Relay and Next.js are both ready I'll be doing a deep dive and will provide guidance on how to use them together.

[vip30]

React 18 official version has been released just thinking about if this is already a good chance for supporting this feature? Thanks a lot

[rrdelaney]

Closing this issue as we no longer use the _document API.