reactjs - How to load async react components without Webpack imports with SSR and RR4 -
i have been looking solution load async react components on demand @ matched route without webpack import, system.import, require.ensure, ...
i want avoid webpack footprints in client-side code.
on server fetch routes , render matched locations static html/js. classic ssr.
my solution is:
- pack async components webpack static bundles (c1.js, c2.js, ...)
- store map routes => async components json ("/path" => c1.js)
- request react-rroute(rr4) matched path param
wrap=true
on ajax - if route exists, , param
wrap=true
render c1.js on server fetch data (universal ajax) db - wrap data , raw c1.js script response
- append response script child @ body or parent react component dom
- script unwraps data , code, stores them (e.g. redux) , append/render async component (c1.js) react dom
this way have small entry file , could:
- request route
https://host
, load component (/path) on demand - request route
https://host/path
on entry , render compleate components (no async) - request route
https://host/path
rr4 , fetch , render async component(s) - reload page 2.
use browser history (back-forward) without requests data or components (both exist in redux store , script tag)
be able use component pagination (load more data , reuse fetched component)
my thoughts on this:
render async components direct dom instead cache them in script tag lose component code on unmount parent component (because async component not exist in main.bundle.js)
questions:
- is there proven approach handle async component loading (react code only , without webpack hacky imports) , able render universal?
is bad practice split react code on independent bundles?
`<script src=bundle.js /><script>*c1.js* code</script>`
- is bad practice appand script tag react component dom (like
<app/>
or<home/>
)- whats hmr (maybe side effects)?
Comments
Post a Comment