First, it's a true JSON response, which is much lighter.

Second: React does a DOM diff and only updates the components that changed. So it's super fast.

Third: when you DO need to use the raw JSON, you have access to it.

Fourth: rebinding behaviors (onClick) etc is done by React seamlessly. And again, uses the DOM diff to be efficient.

Have you measured the efficiency gains? On your site, you are making large scale changes as you click from link to link, so there isn’t much of the ui you aren’t re-rendering.

In the site you linked to, the scroll position gets messed up as you go back and forth between “pages” and click on links — problems that don’t occur when you fully re render a page.

Efficiency in coding: inmeasurable. For typical CRUD it's amazing once you get over the hump of setup.

Efficiency in speed: likely very little over just requesting the HTML via AJAX.

As far as scrolling/etc: that behavior is super buggy and I never really tested it. I "turned on" the turbolink-esque behavior as a test but it needs far more work.

In any case, one can just turn it off and revert to regular SSR behavior instead of the AJAX-ey one. I might even do that because, in general, I want my page to show the traditional loading icon in place of the favicon.

This article summarized some of the pitfalls: https://tinnedfruit.com/articles/create-your-own-dysfunction...