Isomorphic rendering: data-reactid and data-react-checksum not being cleared in v4.

[phyllisstein]

Version

4.0.0-alpha.4

Test Case

https://github.com/phyllisstein/react-router-v4-isomorphic-glitch

Steps to reproduce

1. Create a simple app using React Router v4.
2. Render the app on the server.
3. Run the app in the browser and wait for React to mount.

Expected Behavior

When React mounts, the data-react-checksum and data-reactid attributes should be cleared from the server-rendered components.

Actual Behavior

React appears to mount successfully, as clicking on a Link component does not send an additional request to the server, but the server-rendered attributes are not removed.

[timdorr]

This would be a React issue. But those attributes are sent over in the server-rendered HTML, as they're needed to confirm the correct component tree when the client boots up on top of it.

[phyllisstein]

I'm happy to kick it to the React folks, but it seemed curious that it happened with RR4 and not with previous versions.

[congressclerk]

@timdorr is it possible this could have something to do with the Miss component specifically?

What I am seeing with SSR:
On a match, the checksum attribute is included
On a miss, the checksum disappears, even if included with the pre-rendered html from the server.

This specific discrepancy seems to be causing the React warning:
warning.js:36 Warning: React attempted to reuse markup in a container but the checksum was invalid.

[ryanflorence]

Miss doesn't work yet for picking up a server rendered page in the client.
Needs docs and the (probably not worth it) workaround.
On Sun, Oct 2, 2016 at 12:40 PM foobahh [email protected] wrote:

@timdorr https://github.com/timdorr is it possible this could have
something to do with the Miss component specifically?

What I am seeing with SSR:
On a match, the checksum attribute is included
On a miss, the checksum disappears, even if included with the pre-rendered
html from the server.

This specific discrepancy seems to be causing the React warning:
warning.js:36 Warning: React attempted to reuse markup in a container but
the checksum was invalid.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#3984 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAGHaG5OCc4iwKJktqQZDKQKHiY1mbC_ks5qwAi3gaJpZM4KLx2T
.

[phyllisstein]

#3877 addresses issues with <Miss> and isomorphic rendering, but the issue I've observed can be reliably reproduced even without that component. The repro repo posted above just has a few simple <Match>es, and React still can't clear the checksum and IDs on mount.

[ryanflorence]

For now I recommend server rendering them, then dumping a window.__IS_404__ or something and not loading JavaScript at all in the client.

[congressclerk]

good idea, thanks @ryanflorence