HTMX vs SPA - When to use each

Typical SPA:
├── Frontend (React/Vue)
│   ├── State management (Redux/Vuex)
│   ├── Routing (React Router)
│   ├── API client (Axios/fetch)
│   ├── Build system (Webpack/Vite)
│   └── Testing (Jest/Cypress)
├── Backend (API)
│   ├── Serializers
│   ├── CORS config
│   └── Auth tokens
└── DevOps
    ├── 2 deployments
    └── 2 CI/CD pipelines

<!-- A button that updates only part of the page -->
<button
    hx-post="/add-product"
    hx-target="#cart"
    hx-swap="innerHTML">
    Add to cart
</button>

<div id="cart">
    <!-- Server sends HTML here -->
</div>

@rt('/add-product')
def post(product_id: int):
    cart = add_to_cart(product_id)
    # Returns HTML, not JSON
    return Div(
        *[CartItem(item) for item in cart.items],
        P(f'Total: ${cart.total}')
    )

<!-- HTMX for structure -->
<div hx-get="/dashboard" hx-trigger="load">
    Loading...
</div>

<!-- Alpine.js for local interactivity -->
<div x-data="{ open: false }">
    <button @click="open = !open">Menu</button>
    <nav x-show="open">...</nav>
</div>

<!-- Chart.js only where needed -->
<canvas id="chart"
    x-data
    x-init="renderChart($el, await fetch('/api/data').then(r => r.json()))">
</canvas>

FastHTML + HTMX + Alpine.js
├── Server-side rendering (SEO, performance)
├── Partial updates (fluid UX)
├── Minimal JS (only where it adds value)
└── Single deployment (simplicity)