search

sjc5 / hwy

Hwy is a fullstack web framework for driving a (p)react frontend with a Go backend. Includes end-to-end typesafety, file-based nested UI routing, and much more.
BSD 3-Clause "New" or "Revised" License
317 stars 3 forks source link

Q: htmx implementation #56

Closed xu4wang closed 8 months ago

xu4wang commented 9 months ago

I'm checking the project created by create-hwy@latest and have questions regarding htmx implementation.

I understand it is using hx-boost as below

<body hx-ext="head-support, morph" hx-boost="true" hx-swap="morph:innerHTML" hx-target="this" class="">
...
</body>

However in the server side each API is responding with the full html page, including both head section and the full body.

My understanding (correct me please, HTMX is new for me) is that the server side API should only respond a partial html file, for example only the main section in green block if a nav link a tag is clicked.

My questions are: 1) is my understanding correct, or htmx is smart enough to merge the received whole html with the existing one? 2) If I want to only respond the main section, how shall I config hwy to do so?

image

BR,Austin

sjc5 commented 9 months ago

Hi there @xu4wang,

Yes, you have it exactly right. Hwy targets the full page by default, as it's how any classic multi-page, server-rendered app works and provides the simplest possible mental model. In most cases, this is perfectly fine for performance and usability. If you're developing something particularly interactive, you'll probably also want to use idiomorph for even better page state handling.

If there are places in your app where that "full-page" model isn't best, then you can just "eject" to using Hono and HTMX directly as described in their respective docs to use granular HTML snippets. Any HTMX attributes set on children elements would override the general attributes set on the body tag, so you can just set endpoints and swap targets as described in the HTMX docs, and write the endpoints as normal Hono routes (before the pages handler).

Does that make sense?

xu4wang commented 9 months ago

@sjc5 thanks for the detailed reply！

I will try hwy full page model first. It opens new door for me, I am not aware this is possible. :-)

By the way, why we need hx-target="this" if in any case the whole page will be merged?

BR,Austin

Does that make sense?

sjc5 commented 9 months ago

@sjc5 thanks for the detailed reply！

I will try hwy full page model first. It opens new door for me, I am not aware this is possible. :-)

By the way, why we need hx-target="this" if in any case the whole page will be merged?

BR,Austin

Does that make sense?

That's basically the part that tells HTMX to replace the body by default on all HTMX responses. It's possible it's not needed though – if you remove it and it still works, let me know :)

xu4wang commented 8 months ago

@sjc5 thanks for the detailed reply！ I will try hwy full page model first. It opens new door for me, I am not aware this is possible. :-) By the way, why we need hx-target="this" if in any case the whole page will be merged? BR,Austin

Does that make sense?

That's basically the part that tells HTMX to replace the body by default on all HTMX responses. It's possible it's not needed though – if you remove it and it still works, let me know :)

FYI. I manually removed it from the browser(didn't touch hwy core), and was not able to figure out any difference.