Behavior on server-side when using in conjunction with dynamic imports

[oyeanuj]

Hi @ctrlplusb, while debugging ctrlplusb/react-jobs#51 & ctrlplusb/react-jobs#56, I realized that if there were jobs on dynamic import components, then those jobs wouldn't execute on the server-side since the components are not being imported before render is considered complete.

Here is a simple summarized hierarchy that could reproduced it for me -

<App>
  <Auth> /* <--- Fetch data */
    <Switch>
      <Route component = { AsyncProfile } />
      { /* AsyncProfile dynamically imports Profile which fetches the data */ }
    </Switch>
  </Auth>
<App>

Looking through codebases of this library and react-jobs, it seems like this issue should be resolved here. Thoughts on what should be the expected behavior?

[ctrlplusb]

Definitely should resolve. Sorry was half way through updating react-jobs. Will do and then post an example for you on how to interop the two. I'll probably link the example with react-async-bootstrapper - since that is the "standard" interop interface between the two.

[ctrlplusb]

Apologies @oyeanuj been so busy!

[oyeanuj]

@ctrlplusb No worries, hope you get a chance soon :)

[oyeanuj]

@ctrlplusb Just checking in for an update here? Not sure if you are done updating react-jobs, but an example would be super helpful since this prevents SSR with data-fetching right now :(

[ctrlplusb]

Hey @oyeanuj

You are the definition of patience. 😃

I am trying to throw up a razzle based example now, using react-async-component as well as react-jobs. 👍

[ctrlplusb]

Ok, got it working. :)

Demo: https://razzle-async-components-and-data.now.sh/

Source: https://github.com/ctrlplusb/demo-react-async-and-jobs

I also added emotion for good measure.

[oyeanuj]

@ctrlplusb I've had a chance to drill down more into this and I have one quick question to ask, and observation to report:

Theoretically, should a setup like this work with react-jobs and react-async-bootstrapper on the server-side?

<App>
  <Auth> /* <--- Fetch data */
    <ListingPage> /* <--- Fetch data */
      <MovieOne /> /* <--- Fetch data */
      <MovieTwo /> /* <--- Fetch data */
  </Auth>
<App>

I'm noticing that the after the first pass of react-jobs, the asyncBootstrapper is considering its job over before rest of the jobs have a chance to resolve and render their children.

Any ideas or thoughts would be super useful!