A good way to manage hx-requests vs full page reloads using spring-view-component

[kev3978]

I have been working with HTMX and have just found this library which seems to solve a few of the problems I am seeing as my application grows. However one thing I can't find any examples on is how to handle hx-request vs fresh page load events.

The way I have done this so far is to just check whether that header is present in my controller and then act accordingly (returning a partial fragment if it is a hx-request, or the full-reload if it's not and that is possible e.g. for a deep-link).

Is there a good way to handle this leveraging the spring-view-component library? Or perhaps just a better way in general?

(I'm using svc + kotlin + kte with SpringBoot)

Thanks in advance for your ideas.

[tschuehly]

Yeah that's probably the best idea. What I do is using a htmxutils class that checks if it's a hx request by getting the request from the http context statically.

Then in your viewcomponent you can either return the ViewContext or delegate to the nested ViewComponent that is used for rendering.

[kev3978]

Thanks - not quite sure what you mean 'return the ViewContext' though - that wouldn't be returning HTML to the user would it?

[tschuehly]

For example if you have a TableComponent:

fun render(){
  val list = listComponent.render()
  if(HtmxUtils.isHtmxRequest()){
   HtmxUtil.retarget("tableBodyId")
    return list
  }
  return TableContext(list)
}

When It's a full request you return the full page and if it's a htmx request you just swap the table body in this example.

[kev3978]

Also @tschuehly I have a question about how you granular you use SVC. Do you go as far as making a generic 'FormViewComponent' , 'InputViewComponent' for example and compose using them across your app, or do you generally only go down to the 'UserFormComponent' as described in your workshop docs?

Also, by the way, thanks for the resources you've provided around this library. It's good stuff, and I also found your recorded appearance at the conference to be very useful.

[tschuehly]

It really depends, at work we build a lot of forms so we have all these components on a small scale and then compose them with a strategy pattern: https://github.com/tschuehly/svc-ui

On my personal project it's not repeated that often so I just stick to larger grained components where it makes sense in a interactivity boundary to swap parts of the UI.