You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We have developed a custom server side rendering solution to allow for asynchronous data loading. Once everything is done we flush the final HTML to the browser along with all of the asynchronously loaded data written to the DOM. We are also generating a checksum the same way react does with server side rendering.
During initial mount in the browser, all of the data needed by the app is available, but our data contract layer uses Promises to provide data to those who request it. Our components don't know whether or not the data is available, but our data layer does. So components use the following pseudocode for loading data:
Underneath the hood, our model layer knows whether or not the data is available and uses the data, otherwise it makes an ajax request for the data. But being that react's render is synchronous and Promises are asynchronous, there is no way for us to take advantage of the reuse-existing-markup logic within react. We have tested that if we return a synchronous Promise shim/hack, then everything works as expected - but we all know the dangers in doing this. Is there any way we can defer the checksum checks somehow? Is there a way we can render the vdom only (in memory) and then trigger the mounting logic? We don't want a detached dom with real dom nodes, we are wanting react to construct its vdom and then mount when we tell it to. Thanks.
The text was updated successfully, but these errors were encountered:
Just to clarify a little, by virtue of using Promises, the app is advancing through two different states:
Initial mount, data is not available synchronously (due to Promises)
About 1 tick later the Promises resolve and the app enters a new state.
It would be nice if we could allow the initial mount to happen without react constructing any real DOM or mounting onto existing DOM. At some later point we would like to tell react to mount, at which point react sees the checksum and attempts to reuse the existing DOM.
We have developed a custom server side rendering solution to allow for asynchronous data loading. Once everything is done we flush the final HTML to the browser along with all of the asynchronously loaded data written to the DOM. We are also generating a checksum the same way react does with server side rendering.
During initial mount in the browser, all of the data needed by the app is available, but our data contract layer uses Promises to provide data to those who request it. Our components don't know whether or not the data is available, but our data layer does. So components use the following pseudocode for loading data:
Underneath the hood, our model layer knows whether or not the data is available and uses the data, otherwise it makes an ajax request for the data. But being that react's render is synchronous and Promises are asynchronous, there is no way for us to take advantage of the reuse-existing-markup logic within react. We have tested that if we return a synchronous Promise shim/hack, then everything works as expected - but we all know the dangers in doing this. Is there any way we can defer the checksum checks somehow? Is there a way we can render the vdom only (in memory) and then trigger the mounting logic? We don't want a detached dom with real dom nodes, we are wanting react to construct its vdom and then mount when we tell it to. Thanks.
The text was updated successfully, but these errors were encountered: