nextjs - 💡(How to fix) Fix Loading state shown on SSR despite all required data being prefetched [10 comments, 2 participants]

TL;DR

• The issue can be mitigated by re-examining the usage of useSuspenseQuery and ensuring that the prefetched data is correctly populated in the TanStack Query cache.

Guidance

• Review the page.tsx and loading.tsx files to ensure that the data is being prefetched and cached correctly using TanStack Query.
• Verify that the useSuspenseQuery hook is being used correctly to consume the cached data.
• Check the HTML output to confirm that both the loading state and page content are being rendered, and investigate why the page content is initially hidden.
• Consider exploring alternative approaches to achieve a seamless loading experience, such as using a different caching strategy or optimizing the rendering of the page content.

Example

• No specific code example can be provided without further information, but reviewing the usage of useSuspenseQuery and the caching strategy in the page.tsx file may help identify the issue.

Notes

• The issue may be related to the specific configuration of Next.js and TanStack Query, and further investigation is needed to determine the root cause.
• The provided environment information and package versions may be relevant to the issue, but without more context, it is difficult to determine the exact cause.

Recommendation

• Apply workaround: Re-examine the usage of useSuspenseQuery and the caching strategy to mitigate the issue, as the root cause is not immediately clear and may require further investigation.