Sat down and read through this properly - Rhy's design is very good.
I still maintain that had his script tag just had vanilla JS the whole problem would have been simpler. When he listed his initial complexities in the earlier post, about half of them were reactisms.
I’ll do a longer write up since I appreciate a good faith reply
To state explicitly:
“The goal is to have a search box that on frame 0 of the client seeing it, it is focused for input and has any state from query params or local storage loaded in it”
Web has 3 core primitives, HTML, CSS, and JS
The very first thing the browser loads is the HTML file, that defines what CSS and JS the client loads, what the frame 0/1 of the client sees
So that HTML file is super important, in a fully client side rendered world (CSR) that HTML file just contains a loading spinner while the client fetches the relevant scripts (ie react)
You can see this in something like the sentry dashboard, where it says “loading JavaScript” for 0.5s
This doesn’t work then for our use case as again, we need the moment that HTML reaches the browser on the first request to be focused with correct state
So then what if we just render the HTML on the server?
There’s one or two datastar implementations that do this and they’re sort of compelling, except, they server render every request?
That means if you’re in Australia, you’re hitting a server in US-east with 0 cache hits and a 800ms round trip
To fix this you could either deploy servers to every region, which does work, or, use a CDN cache which’ll be faster but then you’re back to that frame 0/1 issue of “you’re serving some shell of the page that mismatches the local state”
So what you can do is serve the cached page which is the same for 99% of people with a small script tag which ships with the first HTML payload to do an update and it works great
There’s one approach I’m not mentioning here which is this is for frameworks that require hydration (Vue, React), if you’re using raw js or have no hydration then it works great but you still need an inline script tag the problem hasn’t changed!
This also takes no effort but no one does it! Sorry to throw them under the bus but try ChatGPT, Cloudflare Domains, Railway Domains - they all have race conditions in their search bars!
To be honest though, people are way too focused on the technology and not the details
You can make any approach fast, it’s just whether you put in the care to do so