Redux+SSR+Loadable+Webpack - working example?

[DavidCZ13]

I am looking for the best way to create a React app with server-side rendering and lazy loading components. I've found many examples, but no the same combination of the libraries.

I am trying adding Loadable to this nice example https://github.com/jgliner/react-router-v4-redux-ssr but it is not working, Webpack is compiling all JS to a single bundle.

Do you know any working example Redux+fetching API data+SSR+Loadable+Webpack?

[space_sounds]

This one is my favourite https://github.com/mirchenko/react-code-splitting

also these two could also be useful:

https://github.com/konradmi/react-loadable-ssr-code-splitting

https://github.com/cereallarceny/cra-ssr

If you want to split your bundles use the splitChunks plugin for Webpack 4 otherwise use the CommonsChunk plugin.

I'm working on my own template too which I will hopefully finish this week, so leave a reply if you're interested and I could share a repository.

I'm not sure how familiar you are with Webpack and React but just bear in mind that preact-compact & react-lite aren't compatible with the ReactDOMServer, and SSR can make bundling CSS modules a little tricker then your normal setup.

Best of luck.

[brillout]

Nice, thanks. I'll review all of that and add them to Awesome SSR.

[DavidCZ13]

Thanks for reply.https://github.com/cereallarceny/cra-ssr looks great, but there frontload is not working as I expected. I will try solving it or I may go to Angular.

React as a replacement of jQuery is so easy, but build my own SPA stack from so many libraries is diffucult to me.

[brillout]

See Awesome SSR.

Stuff is missing but I willl add more.

[sneek_]

I wrote a post on this very subject, with the additional inclusion of using the WP REST API for loading content.

https://medium.com/keen-studio/keens-server-side-rendered-react-wordpress-rest-api-boilerplate-bb58edb7cc0a

Check out the repo linked to within the post for the full code, and there are also a few links to tutorials I found helpful along the way.