React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering

I have a project where use react-router v3 only for one reason. The reason is the need of server side rendering with data prefetching and the most convenient way to do this is to keep centralized route config in an object or array and loop over the matching elements to fetch the data from the API on the server side. The data later is going to be passed to the client with the response HTML and stored in variable of JSON format string.

Also application uses code splitting, however with the use of babel-plugin-transform-ensure-ignore on sever side I can directly fetch the components instead of lazy loading and the native import method will be used only on client side.

Nevertheless, above-mentioned structure isn't working with react-router v5, as it's little bit difficult, since I can't use @loadable/components, as react-router official documentation suggests. Per my observation @loadable/components just generates the HTML on the server side instead of giving me the components in which I implement the fetch method responsible for server side logic.

Therefore, I would like to ask you the good structure for webpack + react-router v5 + ssr + data prefetch + redux + code splitting

I see it's quite complicated and no universal solution, however I may be wrong.

Any direction or suggestion is appreciated.

from React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering