Server side rendering (ajax call) - react_ujs not mounting component

[gauravtiwari]

Hello there,

I am facing this problem from a while - I am rendering the component via an ajax call and the component is not mounting - obviously because react_ujs is missing.

Does anyone know what's the best way to solve this problem? Manually adding 'react_ujs' into partial does solve this problem but is there any other method to solve this problem - more elegantly?

<%= javascript_include_tag 'react_ujs', 'data-turbolinks-track' => true %>

Thanks

[rmosolgo]

Hi @gauravtiwari , can you help me understand this problem?

When you say you're loading via ajax, you mean you're fetching content for a modal, or something like that, right?

And the page is properly rendered by the server, but then not re-mounted when it's inserted into the page?

Here's what I've done to handle this case:

1. include //= require react_ujs in application.js (so that react-ujs is in the main bundle)
2. manually trigger the UJS mounting by calling ReactRailsUJS.mountComponents(). ( It's available since this PR was merged.)

Does that help in your case?

[bowd]

Also @gauravtiwari, while @rmosolgo is right about how to fix this, I think there's also a conceptual problem with your plan. While it makes sense to have app endpoints that come fully rendered on a normal html request, to me it feels silly to rely on ajax call to the server to render perishable content using React which is designed for the browser. Why not have your ajax call just fetch data, and render your components client side at that point?

[gauravtiwari]

Thanks @rmosolgo, makes sense - didn't knew about this. @bogdan-dumitru Correct! But in this case, I am rendering the content for infinite scroll feed and I don't think if it's possible to do this.

One another factor I think is important to consider is multiple HTTP requests, if one pre-renders the component, it saves some HTTP requests.

Your thoughts?

[bowd]

Don't wanna be overkill on this @gauravtiwari (I don't get to debate these sorta things a lot, so I use any chance I get) but that's not necessarily true, depending on how you structure your components.

For example this search results page has a pagination on the bottom, it's not infinite scroll but you can imagine that it's applicable. When you load the page the cards are rendered server side and when you change the page, a SearchStore gets a new array of props for the cards which are then pushed down by the SearchResults components and updates the cards. You can imagine infinite scroll by just appending to the array in the SearchStore rather than replacing it. I can imagine there might be some optimisations we would do because we would be re rendering all the cards but we already use ImmutableJS so we can get away with a lot easily.

Anyway this is more of a "academic" discussion there's a time and place for everything but I just wanted to point out what I consider a more React/Flux way of handling this.

[gauravtiwari]

Thanks @bogdan-dumitru. Sorry for late reply. Yup makes sense. 👍