If you had multiple suspense components on the same page making database queries. What is happening behind the scenes? Is it more efficient to have a a single query then breaking it in to small server components?
#suspense
graceful dragon
winged shaleBOT
Hi @graceful dragon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
When you have multiple Suspense components on the same page, each making its own data request, the data fetching will happen sequentially if those data requests are different. This is because each Suspense component fetches its own data and waits for the data to be fetched before rendering its content. This behavior is described in the Next.js documentation on Sequential Data Fetching (https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#sequential-data-fetching).
However, if the data requests are for the same data, they are automatically memoized, meaning the data is fetched once and then reused, improving efficiency.
As for whether it's more efficient to have a single query or break it into smaller server components, it depends on your specific use case. If the data needed by different components is largely independent, it might make sense to fetch data in each component using Suspense, allowing parts of your page to render as soon as their data is ready. On the other hand, if there's a lot of overlap in the data needed by different components, it might be more efficient to fetch all the data at once in a single query.
In some cases, users have reported issues with Suspense in Next.js, such as the fallback not being displayed when updating query params and having multiple Suspenses on a single page (source (https://github.com/vercel/next.js/issues/62049)). Some users have found workarounds, such as using the useTransition hook to manage and render the loading state (source (https://github.com/vercel/next.js/issues/62049)).
Remember that Suspense and data fetching strategies are advanced features and should be used judiciously based on the needs of your application.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
graceful dragon
So making a single query and having it memoized is best? Then in each child component I still use suspense for loading ux
@winged shale So making a single query and having it memoized is best? Then in each child component I still use suspense for loading ux
winged shaleBOT
Let me check the knowledge base for you. One moment! :books:
Yes, if multiple components are using the same data, making a single query and having it memoized can be more efficient. This is because the data is fetched once and then reused across components, which can save on network requests and improve performance. This is possible in Next.js because fetch requests are automatically memoized (source (https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#fetching-data-where-its-needed)).
Even when the data is fetched and memoized globally, you can still use Suspense in each child component for a better user experience. The Suspense component can display a fallback UI (like a loading spinner) while the component is waiting for its data, and then render the actual component once the data is ready. Here's an example from the Next.js documentation:
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>
)
}
(source (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#example))
This way, you get the benefits of both efficient data fetching and a smooth user experience.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
graceful dragon
What takes priority if I also have a loading file. On refresh do suspense work or only on next navigation?
@winged shale What takes priority if I also have a loading file. On refresh do suspense work or only on next navigation?
winged shaleBOT
Let me check the knowledge base for you. One moment! :books:
In Next.js, the loading.js file is used to create an instant loading state with React Suspense. This loading state is shown immediately upon navigation, while the content of a route segment is loading. Once the rendering is complete, the new content is automatically swapped in (source (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)).
The loading.js file is nested inside layout.js and will automatically wrap the page.js file and any children below in a <Suspense> boundary. This means that the loading state will be shown whenever the page or any of its children are loading, regardless of whether this is due to a page refresh or navigation to a new route.
However, it's important to note that React Suspense and the loading.js file work together. The loading.js file provides the fallback UI that is shown when a Suspense boundary is hit, i.e., when a component is waiting for its data to load. So on a page refresh or navigation, if a component wrapped in Suspense is waiting for its data, the fallback UI from loading.js will be shown.