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.

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"));