Skip to content

Instantly share code, notes, and snippets.

@khalidabuhakmeh
Created April 26, 2024 13:34
Show Gist options
  • Save khalidabuhakmeh/84beff0adf2d49092a9a7769207d4084 to your computer and use it in GitHub Desktop.
Save khalidabuhakmeh/84beff0adf2d49092a9a7769207d4084 to your computer and use it in GitHub Desktop.
Why and why not to use Htmx + Blazor together

Blazor and Htmx are unique technologies with strengths and weaknesses. In this short list, we'll discuss five reasons to use the technologies together and five reasons to avoid the combination.

Reasons to use them together

ASP.NET Core and Blazor SSR are Good

ASP.NET Core, now with Blazor Server-side Rendering (SSR), is a robust backend HTML generator. You can do almost everything for UI on the server, and with Htmx, you can accomplish some commonly difficult client-side interactions with relative ease.

Less JavaScript and C# Code

With Htmx, you can define interactions declaratively with attributes instead of with control flow logic like if, else, and for loops. There's typically little to no need to write branching logic to accomplish tasks.

HTML for all hosting models

Htmx only needs an endpoint that retrieves HTML blocks. This means that Htmx is also viable for entirely client-side solutions like Blazor Wasm, as long as you have a service worker which can generate HTML snippets.

JavaScript Interop

Blazor's JavaScript interop means that Blazor and Htmx can subscribe to client-side events and functionality and work together rather than against each other.

Components are ready for Hypermedia

Blazor's component-driven design is already primed for the hypermedia paradigm within which Htmx works. Using the RazorComponentResult type, many components can be rendered independent of their component tree and sent piece-meal to the client, which can be more efficient in the long run.

Reasons NOT to use them together

Blazor DOM state management vs. Htmx State

Blazor performs state management on the component hierarchy, and it's nowhere more evident than with enhanced load navigation. When you navigate to a page, the only changed elements are swapped into the page. This means certain page lifecycle events like "load" may not be called and cause issues with Htmx.

Blazor's weaker Razor game

Blazor still lacks tag helpers, which is a strong selling point for Razor Pages and MVC server rendering. Tag helpers help immensely reduce the noise in views with Htmx attributes, and Blazor lacks them for now.

Blazor Routing is a pain

Htmx relies on server-side endpoints to process requests and return HTML snippets to be swapped into the current DOM. Blazor current only allows for Blazor pages to be routes, forcing you to rely on Minimal API endpoints and RazorComponentResult to build out these Htmx-powered touchpoints.

Blazor HTTP response handling is a pain as well

Htmx also relies on HTTP Headers, which Blazor handles mostly independently of the developer. That said, setting HTTP headers from a page/component is possible. Still, you'll need to tie that component to an HttpContextAccessor and HttpContext, which limits its use in different hosting scenarios.

Stepping on each other

Htmx works best when hijacking form submissions, as that is how you can get a significant amount of state from client to server and back. Blazor also has its Form control, and these two elements can step on each other in confusing ways.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment