On .NET Live: Supercharging Blazor SSR with htmx

Рет қаралды 8,387

Күн бұрын

Are you using a front-end framework with Blazor? In this week's episode, community MVP Egin Hansen shows us how to supercharge Blazor static server-side rendering (SSR) with the htmx front-end library. Adding htmx gives you access to another level of interactivity while still retaining all the advantages of Blazor SSR stateless nature.
⌚Chapters:
00:00 Countdown
03:06 Welcome to On .NET Live
04:37 Supercharging Blazor SSR with Htmx
05:40 Blazor render modes - pros/cons
11:10 Bring Blazor Static SSR closer to Blazor Server
11:55 What is Htmx
15:41 Active Search Example
19:01 Where to get Htmx
20:40 Blazor + htmx - the bad parts
23:08 htm@or making Blazor understand htmx
25:40 Q&A
32:45 Demo
40:02 Q&A
41:51 Demo
54:44 Q&A
01:01:23 Wrap
Resource links:
htmx.org
github.com/egil/Htmxor
htmx.org/essays/template-frag...
v1.htmx.org/examples/active-s...
Featuring: Egil Hansen (@egilhansen), David Pine (@davidpine7), Maira Menzel (@mairacw), Frank Boucher
#blazor #htmx

Пікірлер: 10

@ben5219 Ай бұрын

Great demo Egil. I've been wanting to do something similar, and have started a Blazor + HTMX project that was going Ok, but I was ignorant of some of the power of HTMX.....so thanks. I look forward to reviewing you code in a bit more detail.

@garrettlondon470 2 ай бұрын

Incredible!

@ryansaunderson7261 2 ай бұрын

How much harder would it be to build this example using Razor Pages & HTMX and ignoring Blazor all together?

@seancpp Ай бұрын

I've been researching combining HTMX and blazor/razor pages for a short while now, and it's interesting to see this livestream which shows me others are also seeing the potential here. I've come to this same question as you and have been experimenting with combining Razor Pages and HTMX, to test its viability for a production system. My first impressions are that htmx and razor pages work very well together. With razor pages, each page's model contains the request definitions that htmx will use for interactivity. Like the OnGet() method for example. It's almost like they were made to work together. I haven't had a chance to use it in production but so far in my personal testing it shows me huge potential.

@stevenfranzen2161 Ай бұрын

We've been using this combination for a small internal website and we have the same experience as @seancpp. I started it as a Blazor Server app, but one of my team members wanted to experiment with HTMX and rewrote it using Razor pages. The biggest difference with regular Razor pages is just that the OnGet() methods now only render the full page for normal requests. For HTMX requests, they return partial pages that HTMX then inserts into the DOM as instructed, which naturally suits SPA designs. Although not specific to Razor pages, this difference is also relevant to browser caching: if you serve different content for HTMX requests and the header includes a Last-Modified timestamp, you should add "Vary: HX-Request" to ensure that browsers fetch the right cache entry. Otherwise, it also just works (TM).