[dmix]

Most people using react aren't building SPAs. Vue/React can be used the same way as jquery, which is to add enhanced UI functionality that server-side HTML views simply can't offer.

The best example is a multi-select box, or a searchable select box with autocomplete (what W3 calls the combobox pattern https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) which in jquery was usually via https://select2.org/

For example, on my company website there's a timezone select box with 151 options. Asking a user to scroll through 100+ options is a big ask vs typing a few characters and hitting enter. There really is no static server-side way to solve this problem (I tried hard to think of one)... without creating a multi-page Wizard for what should be a single field on a larger form.

If you're building a SaaS product there are many UI requirements that demand high-interactivity and and there's really no better mainstream solution atm than static-first sites with small "islands" of React/Vue/etc components (ideally with hydration).

People still abuse React/Vue of course and the trend is 100% moving back to "mostly static" rather than slow SPAs but IMO JS-powered components are not never going away unless browsers start offering a broad selection of built-in complex web components like comboboxes, datepickers, tooltips, etc.

[jtcasper]

The <datalist> element with a text input field is an HTML native typeahead, which works great with SSR or you could wire up the datalist client side with an XHR creating the datalist.

You maybe don't get full control over the rendering style of it, but it's a still significantly more usable than the Angular Material autocompletes.

[dmix]

That's an interesting one I wasn't familiar with.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da...

It's a shame clicking on it doesn't show the options like a select box though.

[couchand]

Click again I guess?

> Recommended values in types text, search, url, tel, email and number, are displayed in a drop-down menu when user clicks or double-clicks on the control.

[cdcarter]

Clicking it shows the options for me (Chrome 119).

[extra88]

On paper, <datalist> is great but as implemented (or not) in all browsers, it has issues. This post walks through an example of using the element but also summarizes issues (as of June 2023): Under-Engineered Comboboxen?

https://adrianroselli.com/2023/06/under-engineered-comboboxe...

[xigoi]

<input> with <datalist> still doesen't work on Firefox Android.

[boredtofears]

> Most people using react aren't building SPAs

> People still abuse React/Vue of course and the trend is 100% moving back to "mostly static" rather than slow SPAs

I'm not seeing this at all, in fact I can't remember the last React project I worked on that wasn't a full blown SPA. I don't see anyone starting or advocating for static sites with islands unless they're using a framework like Astro or something.

Do you have any example sites or codebases using this approach?

[Zetobal]

Not elegant but we use a websocket for search in htmx.