> Markdown version of [/videos/978-why-htmx-is-crushing-react-vue-svelte?t=849](https://www.wearedevelopers.com/videos/978-why-htmx-is-crushing-react-vue-svelte?t=849). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # Why HTMX is crushing React, Vue & Svelte. Modern SPAs like React have become structural overkill. Learn how HTMX bypasses massive JavaScript bundles and complex state management by returning power to server-rendered HTML. - **Speakers:** [Bene](https://www.wearedevelopers.com/@bene), [Felix Eckhardt](https://www.wearedevelopers.com/@felix-eckhardt) - **Event:** World Congress 2024 - **Published:** August 20, 2024 - **Duration:** 29:04 - **URL:** https://www.wearedevelopers.com/videos/978-why-htmx-is-crushing-react-vue-svelte ## Summary Modern frontend development with single-page applications (SPAs) like React, Vue, and Svelte has introduced significant structural complexity. Building separate JSON APIs, managing delicate state hydration, and debugging extensive framework abstractions often stifles productivity. The serialization overhead and continuous dependency maintenance create heavy applications, leading to the realization that full SPAs are frequently overkill for content-heavy sites. By reconsidering the default frontend approach, development teams can avoid massive JavaScript bundles and regain valuable engineering velocity. A return to the classic Model-View-Controller (MVC) architecture, modernized by robust HTTP/2 streaming capabilities, offers a profound alternative. Frameworks like HTMX allow developers to build server-driven frontends that bypass traditional JSON endpoints. By utilizing declarative HTML attributes, HTMX executes asynchronous requests and injects the returned server-rendered HTML directly into the DOM. This methodology restores the template engine as a primary powerhouse, bridging the gap between backends and frontends without convoluted intermediate state management. A live integration pairing HTMX with Spring Boot and the JTE template engine demonstrates how effortlessly interactive application states—such as a debounced live-search—can be engineered. Realizing dynamic functionality via specialized attributes like `hx-post` inherently resolves heavy DOM hydration issues while offering out-of-the-box SEO-friendly outputs. Ultimately, the greatest workflow advantage is tightly coupling highly performant templates to backend data, empowering full-stack developers to ship rich web experiences inside a single deployable artifact. **Keywords:** HTMX frontend architecture, SPA complexity, react vue svelte alternatives, DOM hydration overhead, server-side HTML rendering, MVC pattern implementation, JSON API decoupling, spring boot integration, JTE template engine, HTTP/2 streaming, javascript bundle reduction, SEO-friendly routing, interactive DOM updates, single deployable artifact, full-stack productivity ## Chapters 1. **Questioning the default use of single page applications** (00:02) — Many developers feel constrained by the industry standard of defaulting to complex frontend frameworks for every project. 1. **Complexity and performance costs of modern frontend architectures** (02:29) — Heavy hydration requirements, serialization overhead, and constant dependency updates reduce team productivity and degrade web performance. 1. **Revisiting the traditional model view controller pattern** (05:45) — Returning HTML directly from the server eliminates client-side complexity while matching modern application requirements. 1. **How modern network protocols empower server-driven frameworks** (07:55) — HTTP/2 and HTTP/3 streaming capabilities remove the need for complex state management and long polling. 1. **Setting up a backend project with Spring and HTMX** (09:59) — Integrating the Java Template Engine with spring boot and HTMX creates a simplified full-stack development environment. 1. **Building interactive components with core HTMX directives** (14:09) — Using HTMX attributes to trigger server requests simplifies returning user interface fragments instead of JSON data. 1. **Generating an ecommerce template and rendering backend data** (17:01) — Generating frontend markup with artificial intelligence enables the server template to map database repository items efficiently. 1. **Implementing conventional server-side search using query parameters** (22:48) — A traditional URL-based form submission provides progressive enhancement by working entirely without client-side JavaScript. 1. **Enhancing conventional forms with reactive HTMX search integration** (25:56) — Adding post requests and trigger delays transforms a standard HTML form into a fast, reactive client experience. ## Related Moments - [Tracking open source community trends in JavaScript native frameworks](https://www.wearedevelopers.com/videos/1288-wearedevelopers-live-scammer-payback-with-python-grok-goes-unhinged-the-future-of-chromium-and-mo) (from "WeAreDevelopers LIVE: Scammer Payback with Python, Grok Goes Unhinged, The Future of Chromium and mo") - [Replacing client-side reactivity with HTMX and server rendering](https://www.wearedevelopers.com/videos/1306-wearedevelopers-live-whats-nuxt-and-next-for-app-development-20-years-ajax-and-more) (from "WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more") - [Balancing server-side rendering and client-side interactivity](https://www.wearedevelopers.com/videos/1265-keith-cirkle-of-github-on-react-fatigue) (from "Keith Cirkle of GitHub on React Fatigue") - [Identifying the ideal web applications for HTMX usage](https://www.wearedevelopers.com/videos/1427-how-to-kill-javascript-from-your-stack-with-htmx-and-kotlin) (from "How to kill JavaScript from your Stack with HTMX and Kotlin") - [Extending native HTML capabilities using the HTMX library](https://www.wearedevelopers.com/videos/1427-how-to-kill-javascript-from-your-stack-with-htmx-and-kotlin) (from "How to kill JavaScript from your Stack with HTMX and Kotlin") - [The evolution and complexity of the modern frontend stack](https://www.wearedevelopers.com/videos/279-the-eternal-sunshine-of-the-zero-build-pipeline) (from "The Eternal Sunshine of the Zero Build Pipeline") ## Related Articles - [Is HTMX Worth Learning in 2025?](https://www.wearedevelopers.com/magazine/537-is-htmx-worth-learning-in-2025) - [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front) - [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us) - [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering) ## Related Jobs - [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group** - [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group** - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia** - [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH** - [Mid/Senior Full-Stack Engineer (Web-first)](https://www.wearedevelopers.com/jobs/ext/1210833-mid-senior-full-stack-engineer-web-first) at **SMG Swiss Marketplace Group** - [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**