Return a 304 Not Modified status code if the rendered content didn't change and no updates are needed.

Author: adamghill

django_unicorn/components/unicorn_template_response.py

@@ -72,13 +72,17 @@ def render(self):
         root_element["unicorn:key"] = self.component.component_key
         root_element["unicorn:checksum"] = checksum
 
+        # Generate the hash based on the rendered content (without script tag)
+        hash = generate_checksum(UnicornTemplateResponse._desoupify(soup))
+
         if self.init_js:
             init = {
                 "id": self.component.component_id,
                 "name": self.component.component_name,
                 "key": self.component.component_key,
                 "data": orjson.loads(frontend_context_variables),
                 "calls": self.component.calls,
+                "hash": hash,
             }
             init = orjson.dumps(init).decode("utf-8")
             init_script = f"Unicorn.componentInit({init});"

django_unicorn/components/unicorn_view.py

@@ -2,6 +2,7 @@
 import inspect
 import logging
 import pickle
+import sys
 from typing import Any, Callable, Dict, List, Optional, Sequence, Type, Union
 
 from django.core.cache import caches
@@ -33,7 +34,7 @@
 # Module cache for constructed component classes
 # This can create a subtle race condition so a more long-term solution needs to be found
 constructed_views_cache = LRUCache(maxsize=100)
-COMPONENTS_MODULE_CACHE_ENABLED = True
+COMPONENTS_MODULE_CACHE_ENABLED = "pytest" not in sys.modules
 
 
 def convert_to_snake_case(s: str) -> str:

django_unicorn/errors.py

@@ -8,3 +8,7 @@ class UnicornViewError(Exception):
 
 class ComponentLoadError(Exception):
     pass
+
+
+class RenderNotModified(Exception):
+    pass

django_unicorn/message.py

@@ -38,6 +38,7 @@ def __init__(self, request, component_name):
         assert self.epoch, "Missing epoch"
 
         self.key = self.body.get("key", "")
+        self.hash = self.body.get("hash", "")
 
         self.validate_checksum()
 

django_unicorn/static/js/component.js

@@ -20,6 +20,7 @@ export class Component {
     this.key = args.key;
     this.messageUrl = args.messageUrl;
     this.csrfTokenHeaderName = args.csrfTokenHeaderName;
+    this.hash = args.hash;
     this.data = args.data || {};
     this.syncUrl = `${this.messageUrl}/${this.name}`;
 

django_unicorn/static/js/messageSender.js

@@ -31,6 +31,7 @@ export function send(component, callback) {
     checksum: component.checksum,
     actionQueue: component.currentActionQueue,
     epoch: Date.now(),
+    hash: component.hash,
   };
 
   const headers = {
@@ -49,6 +50,12 @@ export function send(component, callback) {
         return response.json();
       }
 
+      // HTTP status code of 304 is `Not Modified`. This null gets caught in the next promise
+      // and stops any more processing.
+      if (response.status === 304) {
+        return null;
+      }
+
       throw Error(
         `Error when getting response: ${response.statusText} (${response.status})`
       );
@@ -110,6 +117,7 @@ export function send(component, callback) {
 
       component.errors = responseJson.errors || {};
       component.return = responseJson.return || {};
+      component.hash = responseJson.hash;
 
       const parent = responseJson.parent || {};
       const rerenderedComponent = responseJson.dom || {};

django_unicorn/views.py

@@ -7,6 +7,7 @@
 from django.core.cache import caches
 from django.db.models import Model
 from django.http import HttpRequest, JsonResponse
+from django.http.response import HttpResponseNotModified
 from django.views.decorators.csrf import csrf_protect
 from django.views.decorators.http import require_POST
 
@@ -17,7 +18,7 @@
 from .call_method_parser import InvalidKwarg, parse_call_method_name, parse_kwarg
 from .components import UnicornField, UnicornView
 from .decorators import timed
-from .errors import UnicornCacheError, UnicornViewError
+from .errors import RenderNotModified, UnicornCacheError, UnicornViewError
 from .message import ComponentRequest, Return
 from .serializer import dumps, loads
 from .settings import get_cache_alias, get_serial_enabled, get_serial_timeout
@@ -41,6 +42,8 @@ def wrapped_view(*args, **kwargs):
             return view_func(*args, **kwargs)
         except UnicornViewError as e:
             return JsonResponse({"error": str(e)})
+        except RenderNotModified:
+            return HttpResponseNotModified()
         except AssertionError as e:
             return JsonResponse({"error": str(e)})
 
@@ -569,7 +572,18 @@ def _process_component_request(
     if partial_doms:
         res.update({"partials": partial_doms})
     else:
-        res.update({"dom": rendered_component})
+        hash = generate_checksum(rendered_component)
+
+        if (
+            component_request.hash == hash
+            and (not return_data or not return_data.value)
+            and not component.calls
+        ):
+            raise RenderNotModified()
+
+        res.update(
+            {"dom": rendered_component, "hash": hash,}
+        )
 
     if return_data:
         res.update(
@@ -714,20 +728,22 @@ def _handle_queued_component_requests(
     component_requests = sorted(component_requests, key=lambda r: r.epoch)
     first_component_request = component_requests[0]
 
-    # Can't store request on a `ComponentRequest` and cache it because `HttpRequest`
-    # isn't pickleable. Does it matter that a different request gets passed in then
-    # the original request that generated the `ComponentRequest`?
-    first_json_result = _process_component_request(request, first_component_request)
-
-    # Re-check for requests after the first request is processed
-    component_requests = cache.get(queue_cache_key)
-
-    # Check that the request is in the cache before popping it off
-    if component_requests:
-        component_requests.pop(0)
-        cache.set(
-            queue_cache_key, component_requests, timeout=get_serial_timeout(),
-        )
+    try:
+        # Can't store request on a `ComponentRequest` and cache it because `HttpRequest` isn't pickleable
+        first_json_result = _process_component_request(request, first_component_request)
+    except RenderNotModified:
+        # Catching this and re-raising, but need the finally clause to clear the cache
+        raise
+    finally:
+        # Re-check for requests after the first request is processed
+        component_requests = cache.get(queue_cache_key)
+
+        # Check that the request is in the cache before popping it off
+        if component_requests:
+            component_requests.pop(0)
+            cache.set(
+                queue_cache_key, component_requests, timeout=get_serial_timeout(),
+            )
 
     if component_requests:
         # Create one new `component_request` from all of the queued requests that can be processed

tests/templatetags/test_unicorn_render.py

@@ -4,6 +4,7 @@
 
 from django_unicorn.components import UnicornView
 from django_unicorn.templatetags.unicorn import unicorn
+from django_unicorn.utils import generate_checksum
 from example.coffee.models import Flavor
 
 
@@ -247,7 +248,7 @@ def test_unicorn_render_calls(settings):
 
     assert "<script" in html
     assert len(re.findall("<script", html)) == 1
-    assert '"calls":[{"fn":"testCall","args":[]}]});' in html
+    assert '"calls":[{"fn":"testCall","args":[]}]' in html
 
 
 def test_unicorn_render_calls_with_arg(settings):
@@ -262,7 +263,7 @@ def test_unicorn_render_calls_with_arg(settings):
 
     assert "<script" in html
     assert len(re.findall("<script", html)) == 1
-    assert '"calls":[{"fn":"testCall2","args":["hello"]}]});' in html
+    assert '"calls":[{"fn":"testCall2","args":["hello"]}]' in html
 
 
 def test_unicorn_render_calls_no_mount_call(settings):
@@ -277,4 +278,25 @@ def test_unicorn_render_calls_no_mount_call(settings):
 
     assert "<script" in html
     assert len(re.findall("<script", html)) == 1
-    assert '"calls":[]});' in html
+    assert '"calls":[]' in html
+
+
+def test_unicorn_render_hash(settings):
+    settings.DEBUG = True
+    token = Token(
+        TokenType.TEXT,
+        "unicorn 'tests.templatetags.test_unicorn_render.FakeComponentParent'",
+    )
+    unicorn_node = unicorn(None, token)
+    context = {}
+    html = unicorn_node.render(context)
+
+    assert "<script" in html
+    assert len(re.findall("<script", html)) == 1
+    assert '"hash":"' in html
+
+    # Assert that the content hash is correct
+    script_idx = html.index("<script")
+    rendered_content = html[:script_idx]
+    expected_hash = generate_checksum(rendered_content)
+    assert f'"hash":"{expected_hash}"' in html