Comments (7)
@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:
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.
Related Issues (20)
- if more the one same async components are rendered in same page, only one will be rendered
- Chunk rendered in the server is requested in the client again HOT 1
- Need Help : How can I solve "System is not defined" HOT 5
- Error walking your react tree HOT 1
- No-match routes rendered during async loading HOT 1
- Combining with <link rel="prefetch" /> results in loading async components twice
- Upgrade to support react-async-bootstrapper 2
- App component rendered twice because of AsyncComponentProvider wrapper in RU
- Solved : Flashing LoadingComponent and render twice
- getErrors missing after migration to 2.0.0
- When used with react-hot-loader, async component gets stuck on the loader HOT 3
- Async component not rendering on directly open page
- Client error: Failed to resolve asyncComponent on Safari 11.1
- React.Children.only seems to fail on IE11 HOT 1
- Is it possible to load the async'd components from a custom URL? HOT 1
- Two same simultaneously async components HOT 5
- Informing about React.lazy() HOT 2
- Cannot read property 'helmetInstances' of undefined HOT 3
- migrate to New Context API
- Error async-component, state not reloaded after error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-async-component.