Even if I use suspense component while changing search param page waits until the data fetch happen
#Even if I use suspense component while changing search param page waits until the data fetch happen
brazen notch
ocean glacierBOT
Hi @brazen notch. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The behavior you're experiencing might be due to the way you're fetching data. If you're using await for fetch requests, it will block rendering and data fetching for the entire tree beneath it, unless they are wrapped in a <Suspense> boundary or loading.js is used. This is known as "all or nothing" data fetching, where either you have the entire data for your page or application, or none. This can cause the page to wait until the data fetch is complete before rendering (source (https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#sequential-data-fetching-part-2)).
To prevent this, you can use the <Suspense> component, which allows you to display a fallback UI while the data is being fetched. Here's an example:
import { Suspense } from 'react';
import { PostFeed, Weather } from './components';
export default function Posts() {
return (
<section>
<Suspense fallback={<p>Loading feed...</p>}>
<PostFeed />
</Suspense>
<Suspense fallback={<p>Loading weather...</p>}>
<Weather />
</Suspense>
</section>
);
}
In this example, while the PostFeed and Weather components are fetching data, the fallback UI (<p>Loading feed...</p> and <p>Loading weather...</p>) will be displayed (source (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)).
Another approach to prevent this blocking behavior is to use parallel data fetching or the preload pattern. The preload pattern allows you to start fetching data as soon as possible without blocking the rendering of the rest of your application (source (https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data)).