Component props in resolve function about react-async-component HOT 7 CLOSED

@sergei-zelinsky funny thing is I'm releasing the precise answer to universal "dynamic" imports as we speak. Just this morning Webpack merged my PR (webpack/webpack#5235 (comment)) to make it possible for the first time.

So import(`./${page`) has worked, but to bring everything together you need to use require.resolveWeak(`./${page`) to synchronously render on the server and on first load on the client.

However that didn't work until the PR. Only static resolves like this worked: require.resolveWeak('./Foo').

So the dream of code-splitting has revolved around large hashes of all the potential components you might want to render. My thinking has been that once it's frictionless, simultaneous code-splitting + SSR will reach its inflection point and finally become accessible.

I'll respond with a solution to the "universal" aspects tomorrow, but the short of it is you should be able to do this:

const asyncComponents = {
  ArticlePage: () => import('./ArticlePage'), // make sure the imports are guarded by functions
  ArticleStatisticsPage: () => import('./ArticleStatisticsPage'), // so they aren't called until you need them 
}
// ...
resolve: () => {
  return API.fetchRouteInformation(pathname)
    .then(({ modulePath }) => {
         return asyncComponents[modulePath]().default
    })
},

regarding SSR:
This package does an excellent job avoiding checksum mismatches on the client along with SSR, but it requires making additional async imports after the page loads. So it doesn't support synchronous rendering on the server or on initial load on the client. I'll get back to you tomorrow after I release the latest on how to do that. It's been a long road to make this frictionless. And the problem you've run into--though not the hardest to solve with existing solutions--has been a point of confusion for many.

ps. @ctrlplusb i checked your re-implementation of Apollo's recursive promise resolution on the server a while back, and was really inspired by it. Too little time, but there's a lot we can do with that to combine universal rendering with universal component-level data-fetching. I actually wrote a 1st draft a month ago using the bootstrapper package you made. I just need to re-incorporate it with the latest React Universal Component stuff revolving around the above PR.

from react-async-component.

@sergei-zelinsky hey brother never heard back from you. In any case, here's the article which has the rest of the answers to your questions regarding universally rendering:

https://medium.com/faceyspacey/announcing-react-universal-component-2-0-babel-plugin-universal-import-5702d59ec1f4

from react-async-component.

Hi guys.
Sorry for the late response, it was difficult to answer earlier.
You really helped me.
Thanks a lot for your contribution into open-source community and best support. Great work!
@ctrlplusb @faceyspacey

from react-async-component.

Hey @sergei-zelinsky unfortunately you will always have problems when combining dynamically created asyncComponent instances with server side rendering. This is because internally I have to manage a unique identifier that gets attached to each created asyncComponent instance so that on the render parse I know which components to rehydrate etc. Sorry 😢

@faceyspacey may have some helpful insight into this for you. He also has an alternative solution with a massive focus on SSR experience.

from react-async-component.

@ctrlplusb could you help me, please.

from react-async-component.

@faceyspacey sounds like some exciting work dude! defo keep me posted. :)

from react-async-component.

@ctrlplusb thanks!

...and actually my bad, as i said, dynamic imports work for SPAs (just not for universal apps using require.resolveWeak). So you can simplify the above hash-based approach to having a single import():

const asyncComponents = {
  'my-very-nice-article': 'ArticlePage',  // these are strings
  'statistics-for-my-other-very-nice-article': 'ArticleStatisticsPage', // not the component itself
}

const getAsyncComponent = ({ modulePath }) => import(`./${asyncComponents[modulePath]}`)
   .then({ default: Component }) => Component)

// ...

resolve: () => {
  return API.fetchRouteInformation(pathname).then(getAsyncComponent)
},

from react-async-component.