nextjs waits (suspense enabled) queryFn to return not rendering suspense fallback

[seonghyeonkimm]

I am not sure that I should ask this question here or nextjs discussion. I am facing the issues like below

• when I am developing nextjs app on my local machine,
• I enabled queryClient suspense options
• when nextjs server renders page having useQuery, it does not render suspense fallback but waits it to return.

Is it working properly? I understood that reactQuery queryFn should be suspended on the server and nextjs should render suspense fallback and hydration should be done in the browser. Anyone who has solid understanding about this situation? Please help me to figure this situdation out well.

[TkDodo]

I don't think suspense on the server is working in either nextjs or react-query. Is this a react 18 thing? Please be a bit more specific in which tech / version you are using, and potentially show the issue in a codesandbox reproduction.

[seonghyeonkimm]

@TkDodo I am sorry that I did not explain specifically before. I made codesandbox that can show what problem I am facing.

Package versions

• nextjs: 12.1.5
• react-query: 4.0.0-beta.5
• react: 18.0.0
• react-dom: 18.0.0

Descriptions

• I created QueryClient which enabled suspense option.
• I tried to render component which has one useQuery that will be resolved 2 seconds later.
• In this situation, when I was using react-query(3.34.19), nextjs (12.1.0), react, react-dom (18.0.0-rc.0), first html from the server rendered suspense fallback when component has suspended useQuery.
• However, after upgrading nextjs is not the same with something I expected.
• nextjs is waiting react-query queryFn is resolved and send html which includes suspensed component result.

Am I understanding how react and react-query is working wrongly? Please share your thoughts on this issue. Thanks.

[seonghyeonkimm]

I did experiment one more with different react, react-dom versions. I made codesandbox again with this environment

Package versions

• nextjs: 12.1.5
• react-query: 4.0.0-beta.5
• ~react: 18.0.0-rc.0 (only different with above example) ❗ ❗ ~
• ~react-dom: 18.0.0-rc.0 (only different with above example) ❗ ❗ ~

Descriptions

• With this situations, it works as I expected.
• I think there are some behavior changes between react 18 rc version and react 18 stable releases.

I updated the above codesandbox like below

Package versions

• nextjs: 12.1.0 (I should downgraded nextjs to this version. cause if not it thorw error when it is run with react stable version) ❗ ❗
• react-query: 4.0.0-beta.5
• react: 18.0.0-rc.0 (different with above example) ❗ ❗
• react-dom: 18.0.0-rc.0 (different with above example) ❗ ❗

Descriptions

• With this situations, it works as I expected. suspense fallback is rendered on the server and after suspended useQuery is resolved, suspended component renders on the browser properly.
• I think there are some behavior changes between nextjs version (v12.1.0) and latest nextjs version (v12.1.5)

[TkDodo]

I sadly don't know how / if nextjs has suspense on the server implemented, or if there is an issue with react-query. Anyways, the above RC sandbox was not working for me. I forked it and increased the timeout to see the behaviour better, and it behaves exactly like the one with stable react18 for me: https://codesandbox.io/s/nextjs-react-rc-version-forked-vormbl?file=/pages/_app.js

So I don't think there is an issue with react.

tagging @Ephem because I hope he has more insights than me into how this is supposed to work. It could very well be that suspense on the server is just not working right now.

[seonghyeonkimm]

sorry about the incomplete codesandbox. I updated codesandbox (using react rc version and nextjs 12.1.0) above. I downgraded nextjs to v12.1.0 cause it throw errors when it is run with react, react-dom rc version.

In this codesandbox, you can check different behavior for sure with this codesandbox(using react stable version and nextjs 12.1.5)

As you mentioned above, it might be related to nextjs version not react version.

[seonghyeonkimm]

I thought the same way like you mentiond above It could very well be that suspense on the server is just not working right now.. However, I am confused about react-query suspense mode was working as expected in the previous nextjs version (v12.1.0) but it is not working the latest nextjs version (v12.1.5).

While typing this comment here, I am afraid that It is not the right place to discuss this behavior here in react-query discussion.

While testing package version variations in the codesandbox, I realized that nextjs version is making differences. Let me dig what code changes is made out between nextjs v12.1.0 and nextjs v12.1.5. I will be back to share what I find.

---

I updated the first comment to apply results found while having conversation in this comment thread. 🙏

[nghiepdev]

I am also facing the same issue.

when nextjs server renders page having useQuery, it does not render suspense fallback but waits it to return.

I just want to know if this is expected behavior or not?