It is a huge performance issue.
I tried to do a pokedex in react, you have to use a virtual list, because react/virtual dom is too slow, doing any operation on a plain list with 1k element, like filtering lead to multiples seconds freeze.
This also lead to a lot of issues, like not being able to ctrl+f text being out of screen in a virtual list.
Rendering a page server-side and delivering it to users is about as inefficient a process as you can get unless you have massive resources dedicated to an optimization almost no one needs anymore. The virtual DOM is extremely efficient, it just needs more memory and CPU cycles on the client which are resources readily available. Browsers are very good at managing this in 2022.
Btw, your code in that article is completely irrelevant... I would not be showing people that article in 2022.
It cause an issue: now the search in document browser feature will not work properly.
This is acceptable the usecase you are describing(due to the huge dataset), but a lot of interfaces use such virtual list, and it's an PITA for the user.
Take Azure DevOps for example: In a lot of place, you can't ctrl+f a project outside the screen, even if it exist, you have to scroll to it.
> Rendering a page server-side [...]
Nobody talked about server side rendering there.
> The virtual DOM is extremely efficient
Did you read the article I linked ?
The virtual DOM is not "extremely efficient" it's only good at removing uneeded DOM modifications. Not doing these uneeded modifications in the first place is faster.
I would note however that my laptop is not entirely recent and I'm using firefox and my big pain point has been React Native Web apps like web twitter. So you're likely still mostly right, and the question inevitably becomes "how much mostly is enough for any given application".
Does some impressive compression tricks that results in it being remarkably snappy.
You may prefer to run Xvnc directly rather than use the wrapper script, depends how you want to set everything up.
I will be honest here that my setup is not properly automated yet because it's inside a jail on a FreeBSD install and the underlying box gets good enough uptime that my current half-assed approach hasn't yet annoyed me into finishing it.
There weren't any interesting gotchas though.
Building apps on it show consistent subpar performance.
Deleting it caused a 120ms UI freeze (and I notice it :p):
Profiling report: https://share.firefox.dev/3C3OhIq
Given I had slightly more entries (a hundred more) and that I had way more node per entry, it led me with way worse performance.
Instead of a plain list I have a little summary card per pokemon (which is why I have more node per entry).
The naive implementation in Vue run flawlessly(sadly no preview):
https://github.com/Kuinox/kuinox_pokedex/
Note that the react implementation do weird thing because I tried to get around the issue without success.
https://codesandbox.io/s/hidden-dawn-odm1m1?file=/src/App.ts...