HTMX Versus React Server Components
HTMX Client sends an HTTP request Server responds with HTML Client inserts the HTML response into the document React Server Components Now let me try to explain RSC: Every app (web or otherwise) fundamentally has a couple of ways to store the state: - ephemeral state on device (think hover state or a button) - local state on device (think saved draft of a tweet) - local cache of server state (think your profile avatar) - ephemeral server state (think request IP address) - server space specific to the instance (think of newly uploaded avatar stored in memory or database disk) - persistent server state (think user name stored in DB) - server cache of DB state (think a list of top 10 trending topics) - server queues (think waiting for seconds or admin/sms notification) And every app fundamentally limits how you can access those state stores: - some of the interactions have to be instant and can't be waiting (think rendering wireframe in game) - some of the states have to be reliable and not keep waiting (think input validation) - some of the states can be lost (think a tweet in the Internet or something to a disk position) - some of the states can be slow (think email notifications after a draft's in Gmail) - some are database... (think database goes to...) - some are expected to some real-time process with state generation (I see that it starts...) Now let's make this way more complicated, what about the time when you want to upload new avatar? How many of those places do you want to store data in? How many of those places will get our sync? What feedback do users expect for each? What are the failure modes? Keep in mind that users get accustomed to good thing and what was considered good interaction today, would be considered slow tomorrow. I'll use it as an exercise for the reader to figure out where terms like "client side navigation", "full page navigation", "local first", "progressive enhancement", "optimistic on this is interesting. but really it's two stages of reduction. server components: serialized (client + DOM): rendered DOM:
Вверху показана схема HTMX: клиент отправляет HTTP-запрос, сервер возвращает HTML, а клиент вставляет ответ в документ. Внизу длинный текст о React Server Components и множестве видов состояния превращён в абсурдно перегруженную сцену с бегущими человечками. Шутка противопоставляет простой серверный подход HTMX сложной архитектуре React Server Components и высмеивает её многоступенчатую редукцию.
stick figures / человечкиHTTP request diagram / схема HTTP-запросаserver response / ответ сервераHTML document / HTML-документplatform or conveyor / платформа или конвейерReact Server Components text / текст о React Server Componentslong technical article / длинная техническая статьяrunning figures / бегущие фигуркиblue hexagons / синие шестиугольникиblue arrows / синие стрелкиblack outlined shapes / чёрные контурыwhite background / белый фонcomputer architecture diagram / схема компьютерной архитектурыserialized DOM label / подпись serialized DOMrendered DOM label / подпись rendered DOM
- @gentoomemes / 8824 2024-01-18
- @dev_meme / 5863 2024-02-01
- Type
- image
- Size
- 800×800 · 150.5 KiB
- Mood
- саркастичный, абсурдный
- Language
- en
- Added