2021 is very different from previous years. Many web frameworks have released their new versions. Let's discuss them.
Vdom-based
For example, React, Vue and Preact all belong to this category.
This is also the most mature framework. Their advantages are mature, stable and suitable for most scenarios.
With SSR and partial hydration, react 18's fizz renderer is very interesting.
In addition, such as concurrent mode, scheduling optimization has been discussed for many years.
Fre is a little soldier in this camp. It is the smallest but the fastest.
Compilation instead of runtime
Svelte, solidjs belongs to this category.
I always think that the web does not need to be optimized to the extreme, but the code architecture needs to be pursued unilaterally.
So I prefer Svelte a bit. Compilation and runtime should not coexist, which will make the framework more messy and mediocre.
Solidjs and Vue3 do not do this well. They have compilation and want to runtime. They can't have both fish and bear's paw.
Html first
History is reversing,recently, some frameworks want to return to HTML, away from vdom and away from compilation.
Such as Qwikjs and Alpinejs. They are enhancing HTML, Sprinkling intead of Hydration.
This does fill a part of the cake, but the performance will be lost. For example, alpine has always ranked last in the benchmark.
Summary
I like all three ideas. How about you?
Using one of them is entirely determined by my work.

Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.


Discussion (5)
I'm not sure you ever had a look at the code resulting from Solid.js – it's anything but messy, rather what you'd write yourself if you would manipulate DOM nodes for a living.
Quite on the contrary, Solid's way of not re-running components all the time reduce the mess they make greatly
This has nothing to do with the generated code, but within the framework. If there are two sets of mental models, you need to pursue one of them
But there are not two mental models here, just one: purely reactive DOM handling. Your mental requirement to split that up probably stems from thinking in models like react.
If anything, Solid's use of JSX is much more straightforward than those of vDOM libraries: you write
<div/>and get a HTMLDivElement instead of some abstraction. It's basically WYSIWYG, but for the DOM.I'm just giving an example. Solid needs to compile and runtime reactivity at the same time. Users have to think from the perspective of "what is the generated code like".
But you have to basically do the same with any framework using JSX or any other DSL, regardless if it is fully compiled or only partially. The main difference is that instead of some obscure pragma call, you get understandable DOM operations that are even easily debugged (try that with react without using the react dev tools, just to give one example).