Thank you so much for reading it, did not expect anyone from Vercel to notice it 😄 I guess this is an interesting challenge to tackle from the API perspective, given that the components literally pause their execution when suspended. Also fixed the typo, thanks!
Hi Daniel. Wanted to weigh in on what React and Next.js are doing here in your example.
When you do something async like fetch data inside a Suspense boundary React will produce a fallback UI that can be streamed immediately. However because the Image that you are about to load is not yet rendered…
Until after the data fetch is finished React doesn’t know about the image and thus cannot preload it early.
If your data fetch too 2s to complete then adding the Suspense boundary doesn’t delay when the image is discovered (2s after render start) it simply allows you to see a partial UI 2s early
In the example the image didn’t depend on the data so it’s possible to just refactor the components such that the data fetching happens deeper than where the image is rendered
But that won’t always be the case. For instance if the image is derived from the data fetch itself. In this case there isn’t a way to discover the image any earlier and so the question is whether it is worth seeing partial UI earlier or delaying everything until the image is known
Usually showing some UI earlier is the right call but if it isn’t then just removing the Suspense boundary will make it so that the image is part of the initial UI and thus be preloaded earlier in the HTML
We can look at exploring a preload utility for next Image so you don’t have to do the component level refactoring if you happen to render an image that isn’t directly blocked by some data dependency but is going to be rendered by a component that is
Comments
I'll work with the team to see if we can improve the default.
Also there is a typo in the last code snippet:
should be
When you do something async like fetch data inside a Suspense boundary React will produce a fallback UI that can be streamed immediately. However because the Image that you are about to load is not yet rendered…
If your data fetch too 2s to complete then adding the Suspense boundary doesn’t delay when the image is discovered (2s after render start) it simply allows you to see a partial UI 2s early