Do nested Suspense components cause a sequential or a parallel load?

Question

I understand that Suspense components are the React-ian approach to code splitting, which makes webpages load faster. Now, say you have a component hierarchy like this:

<App>
  <Suspense fallback={<FirstLoader/>}>
    <OuterWrapper>
      <Suspense fallback={<SecondLoader/>}>
        <InnerWrapper>
          {content}
        </InnerWrapper>
      </Suspense>
    </OuterWrapper>
  </Suspense>
</App>

Assume first that only InnerWrapper is lazy-loaded, and in the second case they are both lazy loaded.

Does React defer the loading of InnerWrapper after OuterWrapper is loaded, or are they both loaded simultaneously? Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded.

Bethsaida

Are OuterWrapper and InnerWrapper lazy loaded? – Bunk

Just edited the question body – Bethsaida

by loaded you mean committed to the DOM? – Bunk

Yes. Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded. I couldn't figure this out in my app because they're loading too fast. – Bethsaida

The second Suspense only renders when OuterWrapper is loaded and rendered. I might provide an example to prove that if I find some time. – Bunk

Answer 1

Does React defer the loading of InnerWrapper after OuterWrapper is loaded, or are they both loaded simultaneously? Specifically, whether the rendering of the 2nd Suspense's fallback is deferred after the first component is loaded.

Rendering of the second Suspense will be delayed until OuterWrapper. Everything you pass to OuterWrapper as children:

     <Suspense fallback={<SecondLoader/>}>
        <InnerWrapper>
          {content}
        </InnerWrapper>
      </Suspense>

Is passed to OuterWrapper as props.children when it is going to be rendered. So, rendering of second Suspense can only happen when OuterWrapper is fetched and executed.

Also, in the case when InnerWrapper is lazy-loaded, it going to be fetched after OuterWrapper is rendered. So, in this case, both components aren't fetched in parallel but one after another.

I've created an example to show it here: https://glitch.com/edit/#!/dusty-ghoul

you can play with delay after which scripts are going to be send to the client by modifying delay parameter here:

// public/index.js
const OuterWrapper = React.lazy(() => import("./OuterWrapper.js?delay=5000"));
const InnerWrapper = React.lazy(() => import("./InnerWrapper.js?delay=1000"));

Bunk