React-router: React Router v4 code split with server rendering

[dlebedynskyi]

Intro

First thank you for all work you guys do with react router 4. it does look better and cleaner a lot now. I have one feature request(discussion) - Code Split with webpack without react warning

TL;DR

How to do code splitting with react router v4 for both client and server side without react warnings about hash mismatch?

Feature request

quick and dirty code split

Problem
while server will render content correctly due to synchronous nature or webpack 2 System.import ( or require.ensure webpack 1) - client will be rendering null element, that leads to react complaining that it can not reuse markup.

react-router 2 hacks

sample https://github.com/ryanflorence/example-react-router-server-rendering-lazy-routes/blob/master/modules/client.js#L12
uses hack for side effect of rr2

match({ routes, location }, () => {
render( )//...
}

it _kinda_ works sometimes.

RR4

How to do something like this in react-router 4?
How to trigger webpack loading code before actual rendering?

Suggestion

Could we have some kind or fetching done within BrowserRouter that could handle cases with render returning a promise? Similar to what serverContext is doing on server but for render having a promise?

<Match pattern="/async" render={System.import('./async').then(m=>m.default)} />

It would be really nice to have this ability out of the box.

[pshrmn]

I would argue that the server rendering async content on the first pass is not correct behavior. The first pass should always render null for asynchronously loaded components. If the component should render on the first pass, then it should be loaded synchronously. Changing the asyncComponent's componentWillMount to componentDidMount will cause both the client and server to render null on the first pass.

[vimniky]

@dlebedynskyi Can you have a look of this project ? code-split-component

[dlebedynskyi]

@vimniky thanks for the link. it is basically same as above https://github.com/ctrlplusb/code-split-component/blob/master/src/index.js#L48 - load and save to state.
tbh only time we have a warning is when you navigate to page that comes from chunk but was rendered on server - basically once on initial load. This is why match before was happening before any render at all.

[dlebedynskyi]

@pshrmn simple example for SSR - list page and details(article, profile or what ever 2nd level) page. details page is rendered from chunk. You do want this page to be rendered by server for all SSR reasons. Rendering null - well you might as well do not render at all.
It make more value to have some content with dev warning then none.
Question is really about first initial react pass with content from chunk file. And this is what was a side effect of match before

[yormi]

I did read the whole thing but have you looked into: https://github.com/gabrielbull/react-router-server ?

[dlebedynskyi]

@yormi this looks like some I was looking for. Thanks will check it out.
P.S. it does becomes way more complicated than I expected

[yormi]

@dlebedynskyi I just set up the data loading for server rendering and it
works pretty good for me so far :)

[dlebedynskyi]

@yormi data loading is easy) I still think that this kind of support should come from the box for react-router. There is nothing unusual this days to have universal rendering with code chunks and I do feel like this kind of stuff should be easier.
Especially if you know it was already supported in rr 2

[ryanflorence]

We'll have docs about code splitting + server rendering eventually.

[drejohnson]

Any update on this for v4 beta.5?

[dlebedynskyi]

@drejohnson I ended up using https://github.com/ctrlplusb/react-async-component
So far works for us.
we used also https://github.com/ctrlplusb/code-split-component - deprecated solution atm.
with a bit of magic we ended up with code split, animation and async reducers on RR 4 beta. I can provide sample if really needed.

[drejohnson]

@dlebedynskyi Thanks, I'll look into this! A sample would be appreciated.

[bondz]

@dlebedynskyi please do 😄

[dlebedynskyi]

@drejohnson @bondz something like this https://github.com/dlebedynskyi/react-playground
FYI ignore all script stuff

[terencechow]

Also came across this link if ppl are interested:
https://medium.com/@apostolos/server-side-rendering-code-splitting-and-hot-reloading-with-react-router-v4-87239cfc172c

Edit: After reviewing that github it looks like they removed server side rendering after a couple months. They seem to have said it was leaking memory according to this PR https://github.com/LWJGL/lwjgl3-www/pull/11. I'm not sure I would recommend anyone follow that guide considering they switched away from it themselves...