search

RevereCRE / relay-nextjs

⚡️ Relay integration for Next.js apps
https://reverecre.github.io/relay-nextjs/
MIT License
250 stars 30 forks source link

Remove default fallback on page load? #26

Closed Druddigon closed 2 years ago

Druddigon commented 2 years ago

I noticed that even if I don't specify a fallback as a config parameter for withRelay, there's still a default fallback that is showing which is causing a brief flash when I navigate between pages.

I noticed this also on the example in the repo.

Is there a config parameter or recommendation to avoid this?

rrdelaney commented 2 years ago

This isn't possible to do at the moment. Some fallback needs to be shown while navigating due to how Next.js works internally. We don't have the ability to start a navigation, fetch the data, then complete a navigation. If or when this is possible to do this library will support it, but until then there's not much we can do.

Druddigon commented 2 years ago

Thanks. Is there a recommended UX pattern to apply here to help with the brief flash when navigating?

FINDarkside commented 2 years ago

This should now be possible with React 18 (which is still in beta). It doesn't seem to require any changes to this library, simply having your own suspenses at the correct places means you can render a skeleton page before the data is loaded. If your query only includes fragments, it's enough to have suspense wrapping all the components that call useFragment.

Unless I'm missing something, the only issue preventing this earlier was that suspense wasn't supported server side in React 17. Obviously the fallback page will still be shown if there's a suspending action you haven't handled manually.