React Server Components and HTMX Both Offer Less JS But One Team Quit

Jul 17, 2026 By Lucas Mendes

A mid-sized SaaS company with roughly 40 engineers faced a common problem: their React frontend had grown to over 2 MB of JavaScript, and page loads suffered. Two competing technologies promised relief: React Server Components (RSC), which shift rendering to the server, and HTMX, which adds interactivity through HTML attributes alone. The team split into two groups, each adopting one approach for a new product module. Within six months, half the engineers had quit. This is the story of why a shared goal—less JavaScript—led to such different outcomes, and what it reveals about both technologies.

The Less-JS Promise That Split a Team

React Server Components, introduced experimentally in late 2020 and stable since React 19, allow developers to render components on the server and send only HTML to the client. The promise is drastic: a page that previously shipped 500 KB of JavaScript might now send 50 KB. HTMX, created by Carson Gross in 2020, takes a different route: it lets you add interactive behavior—like form submissions, live search, or infinite scroll—by adding attributes like hx-post or hx-trigger to HTML elements. No build step, no component tree, no state management. The two approaches are philosophically opposed, yet both claim to reduce client-side complexity.

The company in question, a provider of project management tools we will call PlanFlow Inc. (a pseudonym), had a frontend team of 12 engineers. Six volunteered to prototype a new dashboard using RSC; the other six chose HTMX for a separate reporting module. Both groups shared the same product manager and the same deadline: four months to ship a beta. By month three, tensions were high. The RSC group complained that HTMX was “too primitive” and forced business logic into the backend. The HTMX group argued that RSC introduced unnecessary abstraction and debugging nightmares. A failed all-hands vote on standardizing one approach led to three resignations that week. By the end of the sixth month, six engineers had left—three from each camp.

Both technologies delivered on their core promise. The RSC dashboard shipped with roughly 70% less client JavaScript than the old React codebase. The HTMX reporting module reduced JavaScript to almost zero—just the HTMX library itself, under 14 KB compressed. But the human cost overwhelmed the technical gains. As one departing engineer put it in a farewell post on an internal forum, “We spent more time arguing about philosophy than building features.”

The split was not inevitable. Other teams have successfully adopted one or the other without mass exodus. But PlanFlow's experience highlights a deeper truth: the choice between RSC and HTMX is not just technical. It is cultural. It reflects how a team thinks about state, data flow, and the role of the frontend. And when half a team prefers one worldview and half prefers another, no amount of performance wins can bridge that gap.

RSC’s Mental Model Shift: Server as Default

React Server Components fundamentally change how you think about a React app. In traditional React, every component runs on the client. In RSC, components run on the server by default. They can fetch data directly from a database, read files, or call internal APIs—without ever exposing those operations to the client. The server sends HTML to the browser, and only interactive “client components” are sent as JavaScript. This separation is powerful but disorienting for developers who learned React as a client-side library.

The learning curve is steep. A developer must now decide for every component whether it should be a Server Component or a Client Component. That decision affects how data flows, how state is managed, and even what hooks are available. You cannot use useState or useEffect in a Server Component; they simply do not exist there. For React veterans, this feels like a regression. One engineer on the RSC team described the first two weeks as “unlearning everything I knew about React.”

The performance wins, however, are real. Server Components can fetch data once on the server, reducing the number of client requests. They can also selectively send JavaScript only for interactive parts of the page. In PlanFlow's dashboard, the main data grid—a heavily interactive component—stayed as a Client Component, but the surrounding layout, navigation, and static panels became Server Components. The result was a page that loaded in roughly 1.2 seconds compared to 3.4 seconds before. But maintaining that architecture required discipline. Any mistake—like marking too many components as client—could balloon the bundle.

The team also struggled with tooling. Debugging a Server Component is harder than a client one because the server stack trace is remote. The React DevTools, as of mid-2026, still have limited support for inspecting server-side output. And the RSC protocol—a streaming format that sends chunks of HTML and JavaScript—can be hard to reason about when something goes wrong. One engineer spent three days tracking down a hydration mismatch caused by a server component that rendered a different timestamp than the client expected. These friction points accumulated, and morale suffered.

HTMX’s Radical Simplicity: Hypermedia First

HTMX takes the opposite approach. Instead of adding a new rendering model to an existing framework, it extends HTML itself. With HTMX, you can issue AJAX requests, trigger CSS transitions, and update parts of the page—all through attributes like hx-get, hx-post, hx-target, and hx-swap. There is no JavaScript to write for common patterns. The server returns HTML fragments, and HTMX swaps them into the DOM. For developers who grew up with server-rendered apps, this feels like coming home.

The simplicity is genuine. The HTMX team built a reporting module where clicking a filter button sends a GET request to the server, which returns a table of results as HTML. The entire frontend logic for that interaction is a single attribute: hx-get="/reports?filter=open" hx-target="#report-table". No event handlers, no state management, no build step. The team estimated they wrote 90% less JavaScript compared to their old React approach. But that simplicity came with trade-offs.

Complex interactions—like drag-and-drop sorting, real-time collaboration, or multi-step wizards—require either a lot of server round trips or custom JavaScript. HTMX does not prevent you from writing JavaScript; it just does not help with it. The team found that for simple CRUD operations, HTMX was a joy. But when the product manager asked for an inline editable table with optimistic updates, the HTMX team had to either build a custom JavaScript solution or accept a noticeable delay on each keystroke. They chose the latter, and the feature felt sluggish compared to the old React version.

Another friction point was testing. HTMX moves logic to the server, so integration tests become more important. But the team's existing test suite was built around Jest and React Testing Library. They had to rewrite many tests to use Playwright for end-to-end scenarios. The backend team, which used Django, was happy to handle more logic, but the frontend engineers felt their role was diminished. One HTMX adopter later said, “I felt like I was writing PHP in 2005—but with better HTML.” That nostalgia was not universally welcome.

Where Each Technology Actually Breaks Down

RSC and HTMX both hit hard limits when pushed beyond their sweet spots. For RSC, the biggest pain point is highly dynamic UIs. If a page has dozens of interactive elements that change independently—like a spreadsheet or a live dashboard—the boundary between server and client becomes a maze. Every interactive widget needs to be a Client Component, and suddenly the bundle grows again. The team's RSC dashboard worked well for the main view, but adding a real-time notification panel required a separate WebSocket connection and a custom client component that essentially reverted to old React patterns.

HTMX, meanwhile, struggles with complex client-side logic. Anything that requires immediate feedback without a server round trip—like form validation, autocomplete dropdowns, or drag-and-drop—forces you to write custom JavaScript. HTMX does not provide a state management solution; it leaves that to the server. For apps with rich interactivity, the number of round trips can become a performance problem. The HTMX team's reporting module worked fine for batch operations, but a feature that required real-time filtering across thousands of rows felt laggy.

Both technologies suffer from immature debugging tools. RSC's streaming protocol makes it hard to inspect what the server actually sent. HTMX's attribute-based approach means you cannot step through JavaScript logic because there is none. Developers on both sides reported spending hours reproducing issues that would have been trivial to debug in a traditional React app. The RSC team built custom logging middleware; the HTMX team relied on browser network tabs and server logs. Neither was ideal.

The data flow model also differs dramatically. In RSC, data flows from server to client in a single pass, but interactivity requires a client-side state that can diverge from the server. In HTMX, every interaction is a server round trip, so state is always consistent—but at the cost of latency. The team's debates often boiled down to this: do you want fewer network requests with complex client state, or many network requests with simple server state? There is no right answer, only trade-offs.

The Human Cost of Framework Migration

The technical trade-offs might have been manageable if the team had aligned on a single approach. But they did not. The RSC group, mostly senior engineers with deep React experience, saw HTMX as a step backward. The HTMX group, which included several backend-focused engineers, saw RSC as over-engineering. These were not just technical disagreements; they were identity conflicts. The React veterans had built their careers on client-side complexity; HTMX threatened that. The backend engineers had long wanted to reclaim control from the frontend; RSC threatened that.

Productivity cratered during the transition. The RSC team spent roughly three weeks just setting up the server infrastructure and learning the mental model. The HTMX team had a faster start—they could add attributes to existing templates in days—but slowed down when they hit complex features. By month two, both teams were behind schedule. The product manager asked them to share components, but the architectures were incompatible. The RSC dashboard could not embed an HTMX-powered table without an iframe hack. The HTMX reporting module could not consume RSC output directly.

Pair programming sessions, intended to cross-train, turned into debates. One engineer recalled a session where the RSC advocate spent 20 minutes explaining why a server component could not use a context provider, while the HTMX advocate kept asking, “Why not just use an attribute?” The tension was palpable. The all-hands vote in month three was supposed to resolve the direction, but it ended in a 6–6 tie. The engineering VP broke the tie by choosing RSC, citing alignment with the company's React investment. Three HTMX engineers resigned the next week. Three RSC engineers followed within three months, citing burnout from the conflict.

The departures were not just about technology. They were about respect. Engineers who preferred HTMX felt their expertise was devalued. Engineers who preferred RSC felt their craft was being simplified into irrelevance. Both sides had valid points, but the organization had no framework for reconciling them. A former team member later told me, “We were so focused on which approach was better that we forgot to ask whether we could work together.”

Practical Takeaways for Teams Considering Either

PlanFlow's story offers several concrete takeaways. First, audit your app's interactivity needs before choosing. If your app is mostly content display with occasional form submissions, HTMX is likely a better fit. If your app has complex, stateful interactions—like a drag-and-drop kanban board—RSC (or even traditional React) may be necessary. PlanFlow's dashboard was borderline: it had some interactivity but not enough to justify the full RSC complexity. A prototype of both approaches on a critical feature would have revealed this mismatch early.

Second, expect a productivity dip of roughly two to three months regardless of which you choose. RSC requires learning a new mental model; HTMX requires rethinking how you structure server responses. Neither is a drop-in replacement. PlanFlow's four-month deadline was aggressive; a six-month timeline with a month of exploration might have reduced friction. Instead, the pressure to ship forced premature commitment and increased frustration.

Third, invest in shared conventions early. Both approaches benefit from agreed-upon patterns for data fetching, error handling, and loading states. The RSC team never settled on whether to fetch data in Server Components or in a separate data layer. The HTMX team argued about whether to return full HTML fragments or minimal partials. Without shared conventions, each engineer developed their own style, making code review painful and maintenance harder. A style guide written by both teams could have prevented some of the conflict.

Fourth, consider a gradual rollout rather than a big bang rewrite. PlanFlow tried to convert two modules simultaneously. A better approach might have been to pick one module—the one with the clearest fit—and let the whole team work on it together. That would have forced collaboration and exposed trade-offs without the us-versus-them dynamic. The team that paid for both Flutter and SwiftUI learned a similar lesson: parallel adoption without shared ownership creates silos.

Finally, acknowledge that the choice is as much about people as technology. A team of React veterans may resist HTMX not because it is technically inferior, but because it challenges their identity. A team of backend engineers may embrace HTMX for the same reason. The successful adoptions I have seen involve teams that either already share a worldview or are willing to learn a new one together. Forcing a split rarely ends well.

The Verdict: Not a Winner, a Spectrum

RSC and HTMX are not competing to solve the same problem. RSC optimizes the delivery of React apps by moving rendering to the server. HTMX optimizes the simplicity of server-rendered apps by adding interactivity without JavaScript. They serve different use cases, different teams, and different philosophies. PlanFlow's team learned this the hard way: you cannot treat them as interchangeable options.

For apps with heavy data fetching and moderate interactivity, RSC can reduce bundle sizes significantly while preserving a component-based architecture. It works best when the team already knows React and is willing to invest in learning the server/client boundary. For content-heavy, form-driven sites where interactivity is limited to clicks and submissions, HTMX offers a simpler path with fewer dependencies and a shallower learning curve. It works best when the team prefers server-side logic and wants to minimize frontend complexity.

Neither is a silver bullet. PlanFlow's dashboard would likely have succeeded with either approach if the team had been united. The failure was not in the technology but in the process. A slow, collaborative evaluation with a shared prototype might have built consensus. Instead, the split created two camps that could not reconcile. The engineers who left went to companies that aligned with their preferred paradigm. PlanFlow itself is still recovering, with a smaller team and a hybrid architecture that neither side loves.

Approach RSC or HTMX with humility. Every framework makes trade-offs. Every team has cultural preferences. The best choice is the one your team can commit to together—not the one that looks best on a benchmark. As one of the departed engineers wrote in their final email, “I didn't leave because HTMX is bad. I left because I couldn't stand fighting about it anymore.”

Recommend Posts
Tech

One Audit Log's Retention Period Cost a Six-Figure Insurance Claim Payout

By Yusuke Tanaka/Jul 17, 2026

A six-figure insurance claim was denied because audit logs had been overwritten. This article examines how retention policies, log integrity gaps, and supply-chain blind spots turn security practices into financial liabilities.
Tech

One Team Measured React Server Components Against a Raw DOM Write and Found Nothing Broke

By Lucas Mendes/Jul 17, 2026

A production team compared React Server Components against a raw DOM baseline. Two weeks, 1.2 million sessions, and no regressions. Here's what they learned.
Tech

SwiftUI and Kotlin Multiplatform Both Pass Mobile Interviews but Hire Different Engineers

By Lucas Mendes/Jul 17, 2026

SwiftUI and Kotlin Multiplatform both clear mobile interviews in 2026, but they attract distinct engineer profiles. This feature explores trade-offs, job market signals, and how to pick your lane.
Tech

One Maintainer's Unmerged Pull Request Exposed a CI Token Leak That Was Active for Eight Months

By Deepa Iyer/Jul 17, 2026

A lone maintainer's CI debugging session uncovered a token exposed in plaintext for eight months. The unmerged PR reveals systemic gaps in supply-chain security.
Tech

One Paid License Consultant Wrote a Copyleft Exception That Stalled Three Acquisitions

By Sara Park/Jul 17, 2026

A single copyleft exception drafted by a freelance consultant stalled three acquisitions, costing tens of millions. How one bad clause became a poison pill.
Tech

One Platform Team's iOS Push Certificate Expiration Cost Three App Releases

By Lucas Mendes/Jul 17, 2026

A platform team missed a push notification certificate expiry, delaying three app releases by 6-8 weeks. This analysis covers the hidden dependencies in mobile CI/CD and how to automate certificate lifecycle management.
Tech

Flutter's Widget Tree vs SwiftUI's View Body Two Teams Paid for Both

By Deepa Iyer/Jul 17, 2026

A business breakdown of Flutter and SwiftUI: what each gets right, the hidden costs, and why teams often end up maintaining both stacks.
Tech

A Security Audit on Two Build Pipelines Found One Dependency Repeats in Both

By Deepa Iyer/Jul 17, 2026

A security audit of two competing CI/CD pipelines revealed a shared vulnerable dependency. This article examines the economic and technical blind spots that allow such duplication, and offers practical fixes for engineering leaders.
Tech

One Maintainers Three-Year-Old Fix Went Unmerged While a Zero-Day Exploited the Same Flaw

By Deepa Iyer/Jul 17, 2026

A three-year-old pull request fixing a null-pointer dereference sat unmerged while attackers exploited the same flaw. This feature examines why good fixes rot in open source and how to prevent it.
Tech

One Training Budget Split Inference Between NVIDIA and AMD and Cut Costs by a Third

By Sara Park/Jul 17, 2026

Splitting inference across NVIDIA and AMD GPUs can cut costs by a third. A deep dive into real-world economics, vendor negotiation, and the tradeoffs of a mixed fleet.
Tech

React Server Components and HTMX Both Offer Less JS But One Team Quit

By Lucas Mendes/Jul 17, 2026

A mid-sized SaaS team adopted both React Server Components and HTMX to reduce JavaScript. Half the engineers quit within six months. Here is what each technology gets right and wrong, and the human cost of choosing wrong.
Tech

Two Package Registries Priced the Same Dependency at a Five-Fold Security Audit Gap

By Sara Park/Jul 17, 2026

A single dependency costs five times more to audit on one registry than another. This article breaks down the economics of security in package registries.
Tech

One Maintainer Rewrote an Auth Library Twice Because No One Would Merge the Security Patch

By Sara Park/Jul 17, 2026

A maintainer rewrote an auth library twice after a critical security patch sat unmerged for 18 months. The story exposes the human cost of open source maintenance, supply-chain risk, and the funding gap in critical infrastructure.
Tech

SwiftUI and Jetpack Compose Share One Syntax But Two Team Cultures

By Deepa Iyer/Jul 17, 2026

SwiftUI and Jetpack Compose look alike on the surface, but beneath the syntax lie two radically different team cultures—Apple's playground mentality versus Google's engineering sandbox.
Tech

One Engineer's Config Drift Brought Down a Monorepo CI Pipeline for Two Months

By Deepa Iyer/Jul 17, 2026

A single mismerged YAML file silently corrupted a monorepo CI pipeline for 67 days. This is the story of how config drift escapes detection and what teams can learn from it.
Tech

One Maintainer Cut a Single Monorepo Tool That Replaced Three Dedicated CI Systems

By Yusuke Tanaka/Jul 17, 2026

How a single engineer replaced three separate CI systems with one monorepo tool, cutting pipeline runtime by 70% and monthly costs by 60%.
Tech

One Unpaywalled Dependency Tree Forced a Maintainer to Refactor Ten Years of Patches

By Deepa Iyer/Jul 17, 2026

A maintainer spent 300–400 hours untangling a decade of patches after an unpaywalled dependency tree collapsed. The story reveals systemic risks in open-source dependency chains and the unpaid labor behind critical infrastructure.
Tech

One Abandoned Android Library Cost Each Fork Four Months of Maintenance

By Yusuke Tanaka/Jul 17, 2026

When an Android library drops maintenance, forking it costs teams roughly four months each. This article examines the hidden costs, business models, and practical steps to reduce the burden.
Tech

One Inference Engineer's GPU Swarm Saved a Week per Pipeline Run

By Deepa Iyer/Jul 17, 2026

How a mid-size AI lab cut fine-tuning time from 7 days to 14 hours by swapping a homogeneous A100 cluster for a dynamic swarm of heterogeneous GPUs on spot instances.
Tech

One Maintainers License Change Forced Forty Downstream Projects to Adopt an Alternative Fork

By Yusuke Tanaka/Jul 17, 2026

When Redis Labs added the Commons Clause in 2018, over 40 downstream projects were forced to evaluate alternatives. KeyDB emerged as a viable fork, revealing lessons in open-source governance and license stability.