Upgrade to react 18 and adopt suspense

[jacobhq]

Discussion in #1897

^{Originally posted by jacobhq March 30, 2022}
Now that react 18 has been released, we will need to complete some tasks:

• Update callouts in vercel/swr-site that say suspense is in beta
• Increase prominence of suspense related documentation
• Discuss whether suspense should be used by default in swr

[shuding]

Thanks for creating this!

Still there're a few things about clarification when using Suspense in SWR (or any other data fetching library). I personally still don't recommend using it in production:

• When using Suspense with SSR, it will likely to cause hydration mismatch issues: SWR should throw when trying to suspend on the server #1832
• Waterfall and conditional requests with Suspense isn't solved: [RFC] useSWRSuspense (or Suspense guards) #168

Last year I shared this write-up to the React working group: The Journey of SWR and Suspense, to give feedback of using Suspense for data fetching. As you can see that today, there are still a lot of things missing. And it's very possible that the API of using Suspense in SWR will change quite a bit. It sounds good to change it to "beta" but a lot of research is still needed (I know that there're other libs trying to solve these problems too).

Also from the official blog post of React 18:

Ad hoc data fetching with Suspense is technically possible, but still not recommended as a general strategy.

[stefee]

The comment about ‘ad hoc’ I interpret as meaning ‘don’t try to do fetching without a data fetching library’ not ‘data fetching libraries should not adopt suspense’?

[shuding]

Sorry I didn't mean that data fetching libraries should not use Suspense. What I'm thinking is Suspense based data fetching is almost impossible to implement correctly in the library level as of today, it should be done to the framework level.

[stefee]

Ah I see. Thanks for clarifying this.

[jacobhq]

Thanks for that, so are we waiting for the mentioned issues to be solved, and for suspense to become more stable?

[pkellner]

Thanks for that, so are we waiting for the mentioned issues to be solved, and for suspense to become more stable?

I would love to know the answer to this question. I posted an issue here yesterday (#1906) that makes me feel that SWR is completely broken with NextJS in React 18. I'm having trouble believing no one is talking about this but just a few of us over here. React 18 is a released product from a team the prides itself on not releasing stuff until it's ready. What's going on?

BTW, i did test my little app with CRA and it worked with no error, but since it's a server rendering issue of sorts, I guess that's not surprising.

[stefee]

React 18 is released but a major version change. It will take time for the ecosystem of libraries and frameworks to be ready, so we have to be patient. I’m sure @shuding can add some more clarity on what level of stability we can expect at the moment.

[shuding]

👋 Hey! I answered @pkellner's question here, as I said:

I will keep this issue open until we add more clarification and guidance on Suspense and SSR to the documentation. Let me know if there's any suggestion on this!

As for level of stability for expectation (of using React 18 + Suspense + SWR, probably Next.js too), here're my thoughts:

• Suspense is still experimental in SWR, so there is a risk of using beta feature. We can't make it stable because:
  1. It can't cover all the SWR functionalities yet. Such as avoiding waterfall and dependent fetching.
  2. It can't cover data fetching use cases very well in SSR (that many frameworks do), see below.
• React 18 is a major version change as @stefee mentioned, and it does change the behavior especially for Suspense. When upgrading from 17 to 18,
  1. Suspense will be executed during SSR, so make sure the SWR request works on the server side.
  2. Since Suspense will be executed during SSR, the rendered result will be hydrated too. If the requested and rendered data changes between SSR and hydration, you will get a hydration mismatch error. So make sure to not fetch dynamic data using Suspense + SSR.

In short, if you are using a SSR framework, and using Suspense to fetch data from an API (rather than static resource), it's not safe.

But, if your application doesn't have the concerns above, e.g. you are using create-react-app, or the data is mostly static, then you should be fine.

Note that Next.js will always do SSR for static pages (https://nextjs.org/docs/advanced-features/automatic-static-optimization), that counts too. Other popular frameworks also do SSR. Create-react-app only does CSR.

And lastly, this is not a problem of Suspense in SWR. Every Suspense based data fetching library will have these problems.

[pkellner]

related reactjs/rfcs#229