diff --git a/notes.md b/notes.md new file mode 100644 index 0000000..df9d081 --- /dev/null +++ b/notes.md @@ -0,0 +1,72 @@ +# Loading order problem + +## The problem + +There is a need for lazy components to know whether they are meant to be rendered sync or not, determined by server render. + +The case is this: + +Either of: + +1. Lazy component used multiple times, sometimes within a `Suspense` which gets rendered, sometimes within a `Suspense` which has fallback triggered +2. Extraneous modules may be loaded as part of a chunk (i.e. chunks sometimes contain more modules than they need to) + +Then: + +```js +const Lazy1Inner = Lazy(() =>
Lazy 1 inner
); +const Lazy1 = Lazy(() => ); +const Lazy2 = Lazy(() =>
Lazy 2
); +const Lazy3 = Lazy(() =>
Lazy 3
, {noSsr: true}); + +const App = () => ( +
+ Loading...
}> + + + Loading...}> + + + + + +); +``` + +`Lazy3` is not server-rendered, so triggers fallback of 2nd Suspense. So what should happen on client is: + +As far as 2nd Suspense is concerned, none of `Lazy1`, `Lazy2`, `Lazy3` should be preloaded. But Lazy1 has been due to it's earlier usage. + +Calling order 2nd Suspense expects: `Lazy1`, `Lazy2`, `Lazy3` + +1. `Lazy1` +2. `Lazy2` +3. `Lazy3` +(end of hydration) +4. `Lazy1Inner` + +What actually happens is: + +1. `Lazy1` +2. `Lazy1Inner` +3. `Lazy2` +4. `Lazy3` +(end of hydration) + +If `Lazy()` implementation relies on calling order, it will not get what it expects. + +## Actually this is not a problem + +In the case of lazy component loading (as opposed to lazy *data* loading), order of calling is not important. + +The fallback will still get triggered on client, so the page will rehydrate correctly without errors. + +So it's fine for lazy component loading. + +## BUT could cause problems for other modules which do rely on calling order + +An implementation of lazy data loading might rely on calling order. In which case, this could be a problem. + +If `Lazy1Inner` was a lazy data fetcher, rather than lazy component fetcher, then it will get called in an unexpected order. + +Not good.