Repository: netbox-community/netbox

Issue:
Sporadically broken HTML formatting since at least 3.5.0
### NetBox version

v3.5.1

### Python version

3.10

### Steps to Reproduce

Spontaneously observed behavior:
1. Open any list
2. Click to any object
3. Press "Go back" (or ALT+←) in browser

### Expected Behavior

List will be rendered as usual.

### Observed Behavior

Loaded only part of page, without sidebar, with empty head tag:

![image](https://github.com/netbox-community/netbox/assets/84839985/b18e3bd7-46f4-41b1-bc1d-8c3b72ee72c2)



Discussion:
Thank you for opening a bug report. I was unable to reproduce the reported behavior on NetBox v3.5.2 (Also not able to reproduce on 3.5.1). Please re-confirm the reported behavior on the current stable release and adjust your post above as necessary. Remember to provide detailed steps that someone else can follow using a clean installation of NetBox to reproduce the issue. Remember to include the steps taken to create any initial objects or other data.
I have seen this also from time-to-time recently.  I thought it was just some glitch when I was debugging stuff so didn't bother to track it down, but I have seen this several times.  On a Mac using chrome browser, not sure if that has anything to do with it.
I don't think it's a bug with netbox. Just how browsers load the css and js. When you click back, if the styling is not loaded this happens and I have seen it on other sites too.
Yeah, I tried it with Chrome on both my prod and the demo and no joy.  It could also be browser specific.

I think I may have seen it before too, and when I encountered it I thought at the time it was just a glitch with the HTMX request.
> Please re-confirm the reported behavior on the current stable release

It's totally reproduceable in 3.5.0, 3.5.1, 3.5.2. I encountered it dozen time my own production installation (3.5.0, 3.5.1) and at least once in every 3 versions on your Demo-site, during my check of some conceptions before generating other reports there.

But I agree with @abhi1693 that it's look like browser-related (3 different Chromium-based), because it never reproduceable on repeat (forward-back buttons).
Honestly, the lack of HTML in the screenshot makes me think it is the browser replaying a HTMX request, which results in only a partial HTML being sent and it glitching.  (You only get the table, not anything else like the nav menu)

If we had a consistent way to reproduce this, we could maybe track it down better.
Probably similar to this:

https://github.com/bigskysoftware/htmx/issues/1201

I can reliably recreate it by going to the device list, order the table by a column, closing the tab and then hitting ctrl+shift+t in chrome (re-open closed tab). This only renders the table, without css.

Anyway, there's some context if anyone wants to look into it. There's some suggestions in the linked issue.
Looks like we might just need to use the cache-busting params.
This seems like it can be addressed by setting the `Vary: HX-Request` response header as described [here](https://htmx.org/docs/#caching).

Resolving patch:
diff --git a/netbox/netbox/middleware.py b/netbox/netbox/middleware.py
--- a/netbox/netbox/middleware.py
+++ b/netbox/netbox/middleware.py
@@ -49,6 +49,9 @@ def __call__(self, request):
         # Attach the unique request ID as an HTTP header.
         response['X-Request-ID'] = request.id
 
+        # Enable the Vary header to help with caching of HTMX responses
+        response['Vary'] = 'HX-Request'
+
         # If this is an API request, attach an HTTP header annotating the API version (e.g. '3.5').
         if is_api_request(request):
             response['API-Version'] = settings.REST_FRAMEWORK_VERSION


Test patch: