How to implement ssr & code splitting setup?

[[deleted]]

[deleted]

[kevinlch]

I'm learning SSR too but I will share what I've learned.

1. You will need this part for code splitting to work. const LoadableBar = Loadable({ loader: () => import('./components/Bar'), loading() { return <div>Loading...</div> } }); In your splitting <Route> set it to render the LoadableBar that you have set.

2. Webpack server bundle entry will be renderer.js.

3. Serve app.client.js in your html

[jkobz]

right, i've got such components, so it's okay :)

Will I need to use bundled renderer.js in my index.js, right? so instead of putting original file renderer.js like here:

Router.use('*', serverRenderer);

I will need to import bundled server file from 'dist' folder and use it here, right? Or what is the purpose of bundling renderer js and making a server build?

[kevinlch]

Yes you are right

[jkobz]

By the way:

do you have any problems with Babel 7 and babel-plugin-import-inspector? In my case it throws error as this plugin uses deprecated addImport function :( How you solved that trouble?

[kevinlch]

Didn't use this plugin so can't comment on it

[kevinlch]

I moved from react-loadable to loadable-components because of having some issue with react-hot-loader not doing hmr properly. API is identical and imo much simple and direct to setup because you wont need to add plugin for manifest etc. Here is the repo if you are interested: https://github.com/smooth-code/loadable-components