परिचय

डोनट छेद कैशिंग एक उपयोगी तकनीक हो सकती है जहां आप किसी पृष्ठ के कुछ तत्वों को कैश करना चाहते हैं लेकिन सभी नहीं।

समस्या

एक समस्या जो मैं इस साइट के साथ रख रहा था यह है कि मैं अपने फार्मों के साथ एन्टी-एमएसके0 गढ़े हुए टोकन का उपयोग करना चाहता था।

समाधान

इसके बारे में एक सामान्य तरीका है 'donut hole' कैशिंग जहाँ आप पृष्ठ के अधिकांश को कैश करते हैं लेकिन कुछ तत्वों को।

चूंकि मैं पहले से ही उत्कृष्ट का उपयोग कर रहा हूँ HTMX इस परियोजना में यह एक अति सरल तरीका है HTMX के साथ भागों को गतिशील रूप से लोड करने के द्वारा गतिशील 'डौट छेद | ' | कार्यक्षमता प्राप्त करना मैं पहले से ही के बारे में ब्लॉग किया जावास्क्रिप्ट के साथ एन्टीफ़ॉर्जी-प्रेक्शन टोकन का उपयोग करते हुए लेकिन फिर सवाल यह था कि इस प्रभावी रूप से पृष्ठ के लिए कैचिंग अक्षम किया गया

अब मैं इस प्रकार्य को पुनः स्थापित कर सकता है जब HTMX का प्रयोग करता हूँ गतिशील रूप से आंशिक लोड करने के लिए

  <li class="group relative mb-1 hidden lg:block ml-2" id="typeaheadelement">
    <div  hx-trigger="load" hx-get="/typeahead" hx-target="#typeaheadelement" hx-swap="innerHTML"></div>
</li>

निष्क्रिय सरल, दायाँ? यह केवल एक लाइन के कोड को नियंत्रक में कॉल करता है जो आंशिक दृश्य को लौटाता है। यह इस बात का अर्थ है कि एन्टी--\forgery टोकन सर्वर पर उत्पन्न होता है और पृष्ठ सामान्य रूप से कैश किया जा सकता है।

नोट: यदि आप एक M SK1SPA' जैसे दृष्टिकोण का उपयोग करते हैं जैसा कि मैं HTMX के साथ करता हूँ, तो आपको यह सुनिश्चित करने की जरूरत है कि load घटना फिर से पीछे बटन पर नहीं चलाता

इसका मतलब है कि पहली बार इसे चलाने पर यह आरंभिक div को साफ करता है और नीचे नियंत्रक द्वारा लौटाए गए आंशिक से नई सामग्री के साथ उसे बदलता है।

हम सेट hx-target बाहरी तत्व में मुख्यतः एक JS त्रुटि से बचने के लिए।

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    [HttpGet("typeahead")]
    public IActionResult TypeAhead()
    {
        return PartialView("_TypeAhead");
    }

आंशिक के अंदर हम अभी भी है Anti - forgery टोकन से सरल रूप

<div x-data="window.mostlylucid.typeahead()" class="relative" id="searchelement"  x-on:click.outside="results = []">
    @Html.AntiForgeryToken()
    <label class="input input-sm dark:bg-custom-dark-bg bg-white input-bordered flex items-center gap-2">
        <input
            type="text"
            x-model="query"
            x-on:input.debounce.300ms="search"
            x-on:keydown.down.prevent="moveDown"
            x-on:keydown.up.prevent="moveUp"
            x-on:keydown.enter.prevent="selectHighlighted"
            placeholder="Search..."
            class="border-0 grow  input-sm text-black dark:text-white bg-transparent w-full"/>
        <i class="bx bx-search"></i>
    </label>
    <!-- Dropdown -->
    <ul x-show="results.length > 0"
        class="absolute z-10 my-2 w-full bg-white dark:bg-custom-dark-bg border border-1 text-black dark:text-white border-b-neutral-600 dark:border-gray-300   rounded-lg shadow-lg">
        <template x-for="(result, index) in results" :key="result.slug">
            <li
                x-on:click="selectResult(result)"
                :class="{
                    'dark:bg-blue-dark bg-blue-light': index === highlightedIndex,
                    'dark:hover:bg-blue-dark hover:bg-blue-light': true
                }"
                class="cursor-pointer text-sm p-2 m-2"
                x-text="result.title"
            ></li>
        </template>
    </ul>
</div>

यह तब टाइपेहेड खोज के लिए सभी कोड को समाविष्ट करता है और जब यह प्रस्तुत किया जाता है तो यह टोकन लेता है और अनुरोध में इसे जोड़ देता है

        let token = document.querySelector('#searchelement input[name="__RequestVerificationToken"]').value;
            console.log(token);
            fetch(`/api/search/${encodeURIComponent(this.query)}`, { // Fixed the backtick and closing bracket
                method: 'GET', // or 'POST' depending on your needs
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token // Attach the AntiForgery token in the headers
                }
            })

अंत में

यह एक अति सरल तरीका है HTMX के साथ कैचिंग प्राप्त करने के लिए।