Suspense requiring a timeout
Unanswered
Oriental posted this in #help-forum
OrientalOP
Hey devs! I'm migrating a Next.js 15.1.4 app (with app router) to Suspense and I'm having a weird issue:
I'm having to wrap the promise with a timeout of at least 500 ms so the page renders and then solves the promise with
Each one of the queries for
I've tested many timeouts and 500ms seams to be the minimum for small lists of items like 50, but I I have bigger ones like 1000, then it requires a longer timeout per promise.
Any idea why this might be happening?
const getBigObjectPromise = async (modelId: number) => {
// Required minimum delay for Suspense to properly initialize
const delay = Math.max(500, listOfObjectIds.length * 5);
await new Promise((resolve) => setTimeout(resolve, delay));
return getBigObject(bigObjectId);
};I'm having to wrap the promise with a timeout of at least 500 ms so the page renders and then solves the promise with
use (bigObjectPromise). If I don't use that delay, the time to first byte is huge because it has to build the HTML for a huge list of items instead of just sending the client the HTML and then using Suspense to solve the promises "in a second fase", as it should do from my understanding, for each item.Each one of the queries for
getBigObject(bigObjectId) take between 50ms to 800ms and I might have pages with 4.000 items so the ideal situation is to render the whole page with Suspense fallbacks and then start rendering each item once the promises are getting resolved using useI've tested many timeouts and 500ms seams to be the minimum for small lists of items like 50, but I I have bigger ones like 1000, then it requires a longer timeout per promise.
Any idea why this might be happening?