data-client
data-client copied to clipboard
reactive
useSuspense always displays fallback in next.js 12.1.6
React version : 18.1.0
Package manager version : yarn : 1.22.17
Node version : v16.13.1
Rest Hooks version 6.3.4
Next JS Version 12.1.6
Describe the bug
I'm trying to use next.js for the first time when creating a new app and I’ve got a strange bug when using useSuspense. If the website is already loaded (e.g. I'm on the home page) and I navigate (with Next Router) to a page with useSuspense, it works. I have my data loaded without problem. But if I go directly to this page (or refresh this page), I have the suspense fallback component stuck on the screen (and the page will always be showing the loading state).
I think there is a problem with SSR but I don't really need SSR for this page, so there is no problem if SSR sends the fallback since the data can be retrieved on the client side.
Has anyone successfully set up rest-hooks with next.js using suspense?
Am I understanding correctly that even after the page loads (showing the fallback due to lack of SSR) it still doesn't load the data?
@ntucker exactly
For concrete example, I put LinearProgress material ui component as a suspense fallback and if I access the page directly, LinearProgress run forever (and browser shows circular loading state indicates that page isn't fully loaded)
From the betas to final 18, React changed the nature of SSR - so it's basically avoiding re-renders when the data comes in. I'm working on a solution to this, but was traveling in Europe for the past 3 weeks. Will have designs posted; but figured I should update here.
Confirmed fixed in 6.5.0-beta.1. Will be releasing full version within next week.
The latest version of NextJS supports React suspense, thus a guide for SSR has been added. It includes NextJS as well as React 18 usage with express.