how to use with react 16?

[davidjnelson]

Hello, thanks for the great library! It's really cool :-)

I'm trying to add adsense ads to an app I'm server side rendering with execJS. The ads are not working, I think because render is being called instead of hydrate so google's bot sees the site and there is a race condition between the server rendered content and the google bot evaluation and the render call, so google sees a nearly blank dom.

I saw release notes saying that support was added for hydrate instead of render for react 16. I'm using react 16.

In the documentation, it says that passing a truthy value/expression to reactcomponent as the fourth argument will call hydrate, to attach event handlers but not mutate the dom tree nodes as render would. I looked through the react_on_rails source though, and I'm only seeing the 'prerender' prop controlling this. Also, I am trying to figure out what to pass for domnodeid. It seems this is generated dynamically as I'm not currently passing anything for it. So maybe I just pass some random string like 'app-root-node'?

So, would this be sufficient to work with react 16 server side rendering?

Previous code in erb file:

<%= react_component("Root", props: @root_props, prerender: true) %>

new code in erb file:

<%= react_component("Root", props: @root_props, prerender: true, 'root-dom-node', true) %>

Thanks and have a great new year! :-)

[davidjnelson]

the syntax mentioned in the pull request upgrading to react 16 I mentioned above does not work. did some digging and I don't see anything in the ruby source all the way to the generated ReactOnRails.serverRenderReactComponent call that specifies how to pass an option that would lead to the client side calling hydrate instead of render.

In ReactOnRails.js I do see the ternary for calling hydrate, but it's not clear how that render function on line 177 is being invoked client side. When I try to debug it in the browser with a breakpoint it doesn't get called.

I read the 'how it works' section on the documentation website but it doesn't explain how this process works in detail.

[davidjnelson]

This is the PR I'm reading through to try and understand how to get the client side to call hydrate instead of render: a44cfb2#diff-9df25692b0322943e22c0715b58f52cd

[davidjnelson]

nevermind, I figured it out.

in the erb, this syntax:

<%= react_component("Root", props: @root_props, prerender: true) %>

does indeed trigger a call to hydrate in clientStartup.js::render because shouldHydrate is true because since we're now on the client side and there is a reactdom hydrate function present and the root dom node innerHTML is non empty.

It was a bit confusing that render was getting called even though hydrate is being used, based on the react docs saying that hydrate just adds event handlers. That is explained in more detail in this issue: facebook/react#8017

Thanks, I'll close this. Maybe it will help someone else in the future.