How to load async react components without Webpack imports with SSR and RR4

Question

I have been looking for a good solution to load async react components on demand at matched route without Webpack import, System.import, require.ensure, ...

I want to avoid Webpack footprints in client-side code.

On Server I fetch all routes and render matched locations as static HTML/JS. Like classic SSR.

My solution is:

• Pack async Components with Webpack to static bundles (c1.js, c2.js, ...)
• Store Map for Routes => async Components as json ("/path" => c1.js)
• Request React-Rroute(RR4) matched path with param wrap=true over ajax
• If route exists, and param wrap=true render c1.js on server to fetch data (universal ajax) from DB
• Wrap data and raw c1.js as script response
• Append response as script child at body or parent React Component Dom
• Script unwraps data and code, stores them (e.g. Redux) and append/render async component (c1.js) to React Dom

This way i have a small entry file and could:

1. request route https://host and load component (/path) on demand
2. request route https://host/path on entry and render compleate components (no async)
3. request route https://host/path with RR4 and fetch and render async component(s)
4. reload page like 2.

5. use browser history (back-forward) without requests for data or components (both exist in Redux store and script tag)

6. Be able to use component with pagination (load more data and reuse fetched component)

My thoughts on this:
Render async components direct to Dom instead cache them in script tag will lose component code on unmount parent Component (because async component not exist in main.bundle.js)

Questions:

• Is there a proven approach to handle async component loading (React code only and without Webpack hacky imports) and be able to render universal?

• Is it bad practice to split react code over independent bundles?

  `<script src=bundle.js /><script>*c1.js* code</script>`
  

• Is it bad practice to appand script tag to react component dom (like <App/> or <Home/>)
  • Whats about HMR (Maybe side effects)?

Answer 1

I don't see why you would have to use any Webpack specific code in your client-side code? The below is from a library called react-loadable. The only Webpack specific hack you can do is put a Webpack specific comment near the import to make it use the name specified.

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

This is the library I would suggest you start using when you want to do code-splitting. Especially if you also want to do SSR. It has a few utility classes to help you with that.