Managing Multiple Promises in Next.js
I'm working on a project where we display multiple reports on a single page. Each report has its own set of filters, and currently, I'm fetching data from the database separately for each component. However, when I change the filter in one component, the entire page re-renders, causing all components to refetch data. Since I'm fetching data on the server side, I can't use memoization to prevent rendering.
How do you typically handle this situation to avoid unnecessary page renders when only one component's filter changes?
Solution:Jump to solution
These are trade-offs. Server components are really great to have access to all your data without creating complex APIs with potentially huge JSON payloads.
But if you want fine-grained control of how the UI updates then you're going back to what hooks, APIs, and state management are good for.
And that's perfectly fine, albeit it might be more complexity than you hoped for. Load the initial page from the server. Then handle updates on the browser....
20 Replies
So this is the page where as you can see, Graph has a range filter, now when I change this filter, other reports are also fetched.
you are using query params as the filter state ?
Yes.
maybe caching with fetch('...', cache) ?
I am not using Fetch.
Directly calling the prisma db
I dont have too much experience with cache of react but its seems like the case to use it
https://react.dev/reference/react/cache
cache – React
The library for web and native user interfaces
There should be a better way to acheive this. Suspense should be smart enough to realize that the key hasn't changed so it shouldn't refetch, like we have usememo.
yeah, I would try some manual tests just in case
I have tried React cache as well
doesn't seem to be caching anything
LOL
xD
have you seen this ? https://react.dev/reference/react/cache#troubleshooting
cache – React
The library for web and native user interfaces
if you can send some code it would be great maybe I catch something
So here as you can see Graph and Reports and in their own suspense boundary, on initial reload, it works as expected. but after applying filters, there is no loading state, because both components are fetched again.
I'm not sure if having a key in Suspense prevents refetching, if you pass as key a constant, it wouldnt refetch?
I don't see any freaking point of key prop in Suspense.
I'm not sure if what you're trying to do is supported in next with server components and suspense. the closest I know of is partial rendering, but that doesn't seem to fit your use case. One solution is making each report a client component and using Tanstack Query to fetch the new data for it when it's filters change.
Routing: Linking and Navigating | Next.js
Learn how navigation works in Next.js, and how to use the Link Component and
useRouter hook.Solution
These are trade-offs. Server components are really great to have access to all your data without creating complex APIs with potentially huge JSON payloads.
But if you want fine-grained control of how the UI updates then you're going back to what hooks, APIs, and state management are good for.
And that's perfectly fine, albeit it might be more complexity than you hoped for. Load the initial page from the server. Then handle updates on the browser.
@michaeldrotar , Agreed, I have implemented TRPC for views that have many independent components.