Hello all,

First time poster, long time next js user. I have a quandary regarding a few things but mainly pagination with the app router.
There's a perfect example on the next js tutorial about this: https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

We have a section near the bottom of the learning material where we fetch the page count in the page and then suspend the results.

  const totalPages = await fetchInvoicesPages(query);

This is fine, however, if that fetchInvoicesPages takes longer than a few ms to come back you're going to get some serious ui delay. Example if you set that to take 5 seconds to come back in a delay you basically have a 5 second delay before anything in the ui actually change.

I guess my question is, what would be a good way of getting around this issue? We can use fetch cache, but if we're in an admin panel that is user specific the caching methods become slightly tricky. In an ideal world that request would only take ~20-50ms to come back so hopefully it will never be an issue but we have a client with a large dataset and we would likely need to have something in place for it.

I am also fully aware i could go full on into the client side route and manually hop through the hoops of the past and using things like swr etc to help with the interactions, but it feels like this is the app router + server component's bread and butter and im either missing something!

Any thoughts and help would be appreciated.