Output Cache Views (Query)

[feanz]

This is more of a query than an issue. Sorry if this is not the best place to ask. If there is a better place to raise this feel free to let me know and close the issue.

I'm using ReactJs.net on a large Sitecore Site (.net Enterprise CMS). We have created a really nice model where we integrate React frontend components to Sitecore CMS components. For those who have not used Sitecore it uses Asp.net MVC under the covers to create markup for custom components. This is where we plumb in ReactJs.net.

My question is, is it possible to support the output caching of these views with React? The current issue I am seeing is that the server side rendered markup is there and the content is visible but because the @Html.React call has never been made then that component is not in the Hydrate call. Then react component never initialises. This is fine for components that have not interactivity but for anything else it breaks. Does anyone have a solution for this?

[dustinsoftware]

Hmm. Have you tried using Html.ReactWithInit so that the component markup and script tag is rendered in one method call? That sounds like it will avoid the caching problem you're having.

[feanz]

Thanks @dustinsoftware that was super helpful I did not know this was a feature. I may have to extend it to get the hydrate to happen on page load to hit some other bench marks but this will fix my output cache issue

[gregsmith-ie]

@feanz did you end up developing a solution for hydrating on page load?

[feanz]

Yeah i used the recommended @Html.ReactWithInit method. This does require you to include react and your components scripts before the first component is rendered. This is not great for page paint speed. I created a custom React method that add the hydrate call to an array functions in js. Then I add a call at the end of the body that calls all these functions, so that we can move the react script load to the end of the body.

[aventic]

@feanz can you share an example on how you did this? Struggling with the same issues. Thanks :-)

[dustinsoftware]

@aventic are you observing slow rendering problems if you include your script tags first and use ReactWithInit? I think this is a scenario we should have a better story for, so gathering data for where the pain points are.

[aventic]

@dustinsoftware Sorry for the late answer. Well reason is I dont want to load my script at the very top of my page. I want to load it at the bottom, so all the dom elements are ready and loaded. Sitecore is using renderings, those renderings are getting cached, therefor I did as @feanz. I created a react functions array on the Html helper method, which I then run just after my bundle is initialized in the bottom of the page.

[dustinsoftware]

Re-opening this issue so we can make the caching scenario better in 5.0