Next.js Discord

Discord Forum

Next.js-render metric breakdown and definition w/ Suspense

Unanswered
Yacare Caiman posted this in #help-forum
Open in Discord
Yacare CaimanOP
What's the best way to figure out what is contributing to this metric?

Additionally, what does this metric measure? I've looked at the source code and started reading React lifecycle and Fiber stuff but still don't quite understand the whole picture (Google has more API guides/high level overviews/adverts than nitty gritty but I'm still too lost to read and understand https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.js#L317)

I see that the metric is using performance.mark at two steps, notably finishing the metric in a useLayoutEffect on the Root element. I know that useLayoutEffect will fire right after commit and before paint. But if I have suspended components on my page, does this callback fire once the fallbacks are loaded or when the entire tree unsuspends?

0 Replies