React-router: <Miss> and Server Side Rendering results in invalid checksum

[jumoel]

Version

4.0.0-2 (e12f607)

Test Case

https://github.com/jumoel/react-router-v4-ssr-miss-checksum-fail

Steps to reproduce

Implement Server Side Rendering with a <Miss> component

Expected Behavior

No checksum errors

Actual Behavior

Checksum errors

---

I'd like to help out with the bug (if possible), but I haven't been able to figure out where to start.

[timdorr]

Does your server generate any errors during rendering?

[steida]

I confirm that, and no my server does not generate any errors during rendering.

[ryanflorence]

are you doing a two pass render with serverRenderContext?

[ryanflorence]

oh shoot I get it, I'll post some thoughts later, out and about right now
On Fri, Sep 16, 2016 at 6:33 PM Daniel Steigerwald [email protected]
wrote:

I confirm that, and no my server does not generate any errors during
rendering.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3877#issuecomment-247741499,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaA7kCxMN9laLq2X_Fj-fm43XNQYOks5qq0OBgaJpZM4J-2Ol
.

[steida]

Yes, I do.

[steida]

https://gist.github.com/steida/0627c405246f997dcc007a8cf17bc0f3

[alisd23]

So it seems like this a fundamental with the current Miss API, both client and server need to do 2 render passes to render a Miss component, so at the moment this warning is unavoidable as the client does not render the Miss on the first render.

It's still in alpha so I assume more discussion on the API design will happen, to address things like this. In my opinion there needs to be another way of rendering misses in one pass, otherwise server-rendered apps might have to avoid using v4 at all.

[ryanflorence]

I'd suggest not sending the JS at all on a 404 or not worry about the
repaint for now: it's an exceptional case, seems like an okay trade off
until we + React can't figure it out.

"our 404s repaint when JS loads, therefore we can't use this" seems a bit
of an extreme position 🙂
On Mon, Oct 10, 2016 at 2:13 AM Ali Sheehan-Dare [email protected]
wrote:

So it seems like this a fundamental with the current Miss API, both
client and server need to do _2_ render passes to render a Miss
component, so at the moment this warning is unavoidable as the client does
not render the Miss on the first render.

It's still in alpha so I assume more discussion on the API design will
happen, to address things like this. In my opinion there needs to be
another way of rendering misses in _one pass_, otherwise server-rendered
apps might have to avoid using v4 at all.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ReactTraining/react-router/issues/3877#issuecomment-252568378,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaPEdwmxQcqTdmbX97P8bKYf5E7pGks5qygHSgaJpZM4J-2Ol
.

[alisd23]

Haha true, let's call it _non-optimal_

[ryanflorence]

"non-optimal in the exceptional case" 😜

Leaving this open until i write some docs about it

[michalwerner]

I've encountered the same warning in my case, which is:

• few Match components for predefined routes,
• catch-all at the end, which does server request and check for route definition on the server.

That catch-all uses Miss. I think in this case I could use <Match pattern="/" />, but is there some way to avoid rendering it, when some of previously defined routes matches?

[ryanflorence]

got some docs on my machine, just cleaning house right now.

[alexFaunt]

I've just hit this issue, is it possible to pass the server rendered context result down to the client and use that for the client side render?