SwapSwap.Htmx vs React
Two fundamentally different approaches to building web applications.
React is a client-side JavaScript library for building SPAs. It renders UI in the browser and manages state on the client.
Swap.Htmx is a server-driven approach. HTML is rendered on the server, and HTMX handles partial page updates via HTTP.
| Aspect | ⚛️ React | 🔄 Swap.Htmx |
|---|---|---|
| Architecture | Single Page Application (SPA) | Server-driven partials |
| Language | JavaScript/TypeScript + JSX | C# + Razor (HTML) |
| Bundle Size | 100kb+ minimum | ~14kb (HTMX only) |
| State Management | Client-side (useState, Redux) | Server-side (SwapState) |
| SEO | Poor by default (needs SSR) | Excellent |
| Learning Curve | Medium-High | Low |
| Tooling | Node.js, npm, webpack/vite | .NET SDK only |
When to Choose React
- ✓ Highly interactive apps (real-time collaboration)
- ✓ Offline-first applications
- ✓ Rich animations and transitions
- ✓ Team already knows React
- ✓ Need React ecosystem libraries
When to Choose Swap.Htmx
- ✓ Content-heavy sites, dashboards, CRUD
- ✓ SEO is important
- ✓ .NET team wants to stay in C#
- ✓ Simpler deployment
- ✓ Faster initial page loads
Code Comparison
React + API
const [todos, setTodos] = useState([]);useEffect(() => { fetch('/api/todos') .then(r => r.json()) .then(setTodos);}, []);// + deleteTodo, loading, error...Swap.Htmx
public IActionResult TodoList() => SwapView(_db.Todos.ToList());public IActionResult Delete(int id) { _db.Remove(_db.Find(id)); return SwapResponse().Remove($"#todo-{id}");}