Server-Side Rendering and Code Splitting with React-Router 4 and Webpack 2

[emilecantin]

This issue is a container for comments on this post.

[emilecantin]

Denis Ilin on 2017-6-14 12:08:34: Thank you man, this is awesome! Helps me a lot. Comment imported from Disqus

[emilecantin]

John on 2017-6-19 05:32:04: I am facing some issue in code spliting async https://stackoverflow.com/q... Comment imported from Disqus

[emilecantin]

Genesis A. Guerrero Martinez on 2017-11-10 10:07:11: How to preload data from server? the syncComponent do not exports the static function like loadData or fetchData Comment imported from Disqus

[emilecantin]

emilecantin on 2017-11-10 11:28:22: I have an article coming for exactly that, stay tuned! (It's long overdue, tough) Comment imported from Disqus

[emilecantin]

Ryan Dsouza on 2017-11-6 05:27:53: In this method the entire client.js is loaded with all modules on the initial render? Comment imported from Disqus

[emilecantin]

emilecantin on 2017-7-19 10:34:31: Not sure; I'll have to check next time I update my dependencies. Returning a new class shouldn't matter for React's checksums. Comment imported from Disqus

[emilecantin]

emilecantin on 2017-5-19 11:14:41: Yeah, the new router broke quite a few things with their new paradigm. I think it's a move in the right direction, though, as the new model is quite simpler / more elegant. Comment imported from Disqus

[emilecantin]

David on 2017-5-19 10:56:17: OK.. seems it worked only with old router. Now I've tested it and it's broken. Comment imported from Disqus

[emilecantin]

Martin Černý on 2017-6-11 14:03:15: Thank you, it was very useful for me. I have used it inside https://github.com/MartinCe... if someone is interested to see another example. Comment imported from Disqus

[emilecantin]

Hugmanrique on 2017-7-19 07:09:02: Hi Emile! I've tried using this method for a new website I'm creating but I'm still getting that invalid checksum React warning on the initial page load. It seems like asyncComponent returns a new class everytime and the static values are ignored on a new call which makes the initial render return null (or the loader) instead of the server rendered page.

Do you know if something's changed with react-router or webpack way of resolving imports? Comment imported from Disqus

[emilecantin]

Abraham Hurtado on 2017-8-15 15:33:41: Thank you so much! I'll check it out :) Comment imported from Disqus

[emilecantin]

Sergei Zelinsky on 2017-8-15 04:44:11: @Arhc:disqus Hi. Look at https://github.com/ctrlplus... or https://github.com/faceyspa....
Here is my simple demo implementation using react-async-component. (https://github.com/sergei-z... "https://github.com/sergei-zelinsky/cra-ssr-boilerplate)") Comment imported from Disqus

[emilecantin]

Shachar on 2017-9-30 12:28:44: Amazing!!! Although I changed a little bit the sync and async components (it's a little different, I'm using TypeScript), you really helped me. Thanks! Comment imported from Disqus

[emilecantin]

Sergei Zelinsky on 2017-7-24 13:11:56: Hi, Emile. Thanks for your article.

I have collapsed with a similar problem. I need server-side rendering, code-splitting and etc. I have approximately 10 different pages in my SPA. Application uses SEO-friendly URLs. Mappings between URLs and routes are stored in database.

For example:
URL: /apartments-for-sale-new-york
route: /search/index
or
URL: /apartments-for-sale-new-york-royal-street-4
route: /apartment/index
or
URL: /apartments-for-sale-streets-of-new-york
route: /list/streets

So, I need to fetch route by URL, and use route for resolving component in my application. We haven't getComponent in updated version of react-router and I don't know to resolve this issue.

How can I do it on both client and server side? Comment imported from Disqus

[emilecantin]

David on 2017-5-19 09:14:50: BTW If somebody is interested, react-apollo's renderToStringWithData method works even without changing async code for sync code. Only loading async bundles before rendering on client is necessary. Comment imported from Disqus

[emilecantin]

emilecantin on 2017-11-10 11:30:59: No, client.js only contains AsyncBundle, individual components are code-split. Comment imported from Disqus

[emilecantin]

Abraham Hurtado on 2017-8-14 03:38:53: How could this be done without using static routes? Comment imported from Disqus

[fedorovsky]

Here is a simple boilerplate. I created it for quick testing and research on SSR https://github.com/fedorovsky/react-ssr