Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Detection of partial htmx request in the presence of hx-history #410

Open
brablc opened this issue Jan 12, 2024 · 8 comments
Open

Detection of partial htmx request in the presence of hx-history #410

brablc opened this issue Jan 12, 2024 · 8 comments

Comments

@brablc
Copy link

brablc commented Jan 12, 2024

Python Version

3.11.6

Django Version

4.2.6

Package Version

1.17

Description

The documentation says the detection of a partial htmx request should be: if request.htmx:. However in the presence of hx-history anywhere on the page, when navigating back to this page a full page needs to be returned. To properly handle this situation it is actually necessary to use: if request.htmx and not request.htmx.history_restore_request:.

I would suggest adding something like request.htmx_partial_request.

@adamchainz
Copy link
Owner

I’ll consider it if there is more support for the idea. I am not sure how many people use the history feature.

@viktor2097
Copy link

This happens due to the fact that the htmx part is HTTP cached just by the URL, so it doesn't really know the difference between a htmx request and a full page request
This is mentioned under the cache section

You need to set Vary: HX-Request or Vary: Accept to make sure the it's cached based on headers as well

I think a lot of people will use the history feature, intentionally or not. For example, if you filter on data, you probably use hx-push-url="true" to make sure that the request gets pushed to the url, so you can copy paste the URL and share it with others. Without either of the vary headers specified, if you go to a new url, and then click the back button in the browser, it would only return the partial.

It's easy to add the headers yourself, but I do would like to see it added to the library, since it's a subtle "bug" that you might not notice unless you properly test moving back and forth between your pages while having features that rely on history.
Question is if this feature should be opt-in or opt-out, but definitely deserves a spot in documentation.

@brablc
Copy link
Author

brablc commented Jan 15, 2024

You are correct on the importance of Vary header, but this is not my scenario - there is actually no caching involved at all.

I am just saying that if you ever use hx-history="false" in your application, then checking for request.htmx is not enough.

@viktor2097
Copy link

You are correct on the importance of Vary header, but this is not my scenario - there is actually no caching involved at all.

I am just saying that if you ever use hx-history="false" in your application, then checking for request.htmx is not enough.

Could you provide an example that demonstrates this issue? I'm missing some detail.
if hx-history="false" is set, then going back for me fully reloads the page as there is no caching.

I tried having hx-history set globally, and then used a history feature like hx-push-url, and then the issue of going back not doing a full page reload appears, then the Vary: Accept header solved that for me.

@brablc
Copy link
Author

brablc commented Jan 16, 2024

Could you provide an example that demonstrates this issue? I'm missing some detail. if hx-history="false" is set, then going back for me fully reloads the page as there is no caching.

The problem seems to be introduced here: bigskysoftware/htmx#2013 .

Checking for request.htmx is not enough.

A way to simulate (even without using hx-history) is:

  1. navigate to a page with soma partial content,
  2. navigate to another page
  3. delete local storage history
  4. press back button

Now the fresh partial content would load to the top window. Backend should had generated full page.

@viktor2097
Copy link

I tried to reproduce and "simulate" according to your instructions, and it works as expected with backend generating a full page on back button (with Vary: Accept)

What version of HTMX are you on? What browser? Maybe something else is different for me

@brablc
Copy link
Author

brablc commented Jan 16, 2024

I tried to reproduce and "simulate" according to your instructions, and it works as expected with backend generating a full page on back button (with Vary: Accept)

I have created a demo: https://github.com/brablc/htmx-sandbox . It uses latest htmx 1.9.10 and I run Firefox, but this should not matter.

@adamchainz
Copy link
Owner

You need to set Vary: HX-Request or Vary: Accept to make sure the it's cached based on headers as well

In reference to this, I have added some docs for setting Vary in #464.


I’m still not exactly sure whether to change anything about request.htmx or to add another attribute. It doesn’t seem many people have found this issue, so maybe the “partial rendering” pattern isn't that popular, actually.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants