I also think server-rendered reactive apps are the future. Elixir/Pheonix comes to mind but the liveview stuff seems complex for most FE apps which don't require more efficient data diff over the wire.
i'd say most FE apps are just fetching stuff from BE via rest api and while i think rpc, tanquery all this stuff hides all that plumbing by blending it, but if you get BE to render it from the get go with all the state is handled on the server you wouldn't need FE devs
an entire BE team could create a REACTy application even with existing solutions like inertia.js
going back to htmx, this is interesting aspect of morph:
<div hx-target="this" hx-ext="alpine-morph" hx-swap="morph">
<div x-data="{ count: 0, replaced: false,
message: 'Change me, then press the button!' }">
<input type="text" x-model="message">
<div x-text="count"></div>
<button x-bind:style="replaced && {'backgroundColor': '#fecaca'}"
x-on:click="replaced = true; count++"
hx-get="/swap">
Morph
</button>
</div>
</div>
but then in datastar its very straight forward but its doing different things I understand.
data-store="{
id: 1,
firstName: 'John',
lastName: 'Doe',
email: 'joe@blow.com'
}"
gets appended as an attribute to id=contact_1 similar to htmx-morph but this is far more readable and intuitive imho
<div id="contact_1">
<label>First Name: John</label>
<label>Last Name: Doe</label>
<label>Email: joe@blow.com</label>
<div>
<button data-on-click="$$get('/examples/click_to_edit/contact/1/edit')">
Edit
</button>
<button data-on-click="$$get('/examples/click_to_edit/contact/1/reset')">
Reset
</button>
</div>
</div>
one thing that concerns me about datastar is that its quite new but seems at least its updated weekly although the last release i see is 4 months ago