Next.js 14: useSuspenseQuery not triggering Suspense fallback on refresh

Question

When you navigate from the main page to the update page, Suspendse performs the fallback successfully, but after updating on the update page, fallback does not work.

// update/[id]/page.js
'use client'
import React, { Suspense } from 'react';
import ErrorBoundary from '../../components/ErrorBoundary';
import UpdateTopiceDataFetcher from '../../components/UpdatePage/UpdateTopiceDataFetcher';

const UpdatePage = ({ params: { id } }) => {
    return (
        <div className='updateCotainer'>
            <div className="updateForm">
                <ErrorBoundary fallback={<h2>Error!!!</h2>}>
                    <Suspense fallback={<h2>Loading...</h2>}>
                        <UpdateTopiceDataFetcher id={id} />
                    </Suspense>
                </ErrorBoundary>
            </div>
        </div>
    );
}

export default UpdatePage;

'use client'
import { useSuspenseQuery } from '@tanstack/react-query';
import fetchTopiceData from '../../utils/shared/fetchTopiceData';
import UpdateForm from './UpdateForm';

const UpdateTopiceDataFetcher = ({ id }) => {
    const { data: topiceData } = useSuspenseQuery({
        queryKey: ['topiceData', id],
        queryFn: () => fetchTopiceData(`${process.env.NEXT_PUBLIC_API_URL}api/topices/${id}`),
    });


    return <UpdateForm topiceData={topiceData} />;
};

export default UpdateTopiceDataFetcher;

I am using useSuspenseQuery from React Query in a Next.js 14 project.

I wrapped my component with <Suspense fallback={<div>Loading...</div>}>, expecting that when I refresh the page, the fallback would be displayed while the data is being fetched. However, after refreshing, the Suspense fallback is not triggered, and the page renders without showing "Loading...".

I tried:

• Setting staleTime: 0 in useSuspenseQuery, but it did not solve the issue.
• Setting cacheTime: 0 to ensure no cached data is used, but the fallback still does not appear.
• Wrapping the entire page with <Suspense> to force loading behavior, but the issue persists.
• Checking the network tab in Chrome DevTools, and I confirmed that a new API request is indeed being made after the refresh.
• Using useEffect and useState to enforce CSR (Client-Side Rendering), which does work but is not an ideal solution. This approach forces client-side behavior, but it does not align with React Query's recommended pattern of handling loading and error states externally.
• Using dynamic() with { ssr: false } to exclude the component from SSR, but this did not solve the issue either.

❗ What I Expected:

• When I refresh the page, I expect Suspense to display the "Loading..." fallback until the API request completes.
• However, the page renders immediately, skipping the fallback state.