جنگو + HTMX: رابط تعاملی بدون ساختن SPA

کاربران امروزی بازخورد فوری می‌خواهند: جستجوی زنده، اعتبارسنجی درجا، مودال
و لیست بی‌نهایت. سال‌ها پاسخ پیش‌فرض «React راه بینداز» بود. برای بسیاری از
محصولات جنگو، HTMX مناسب‌تر است—مخصوصاً وقتی منطق دامنه از قبل در فرم‌ها،
مجوزها و ORM زندگی می‌کند.

HTMX واقعاً چه می‌کند

HTMX (حدود ۱۴KB) HTML را با attributeهایی مثل hx-get، hx-post،
hx-target و hx-swap گسترش می‌دهد. مرورگر درخواست AJAX می‌فرستد؛ ویوی
جنگو یک قطعه HTML برمی‌گرداند؛ HTMX آن را در صفحه جابه‌جا می‌کند. نه
قرارداد JSON، نه روتر کلاینت، نه قوانین اعتبارسنجی تکراری.

به همین دلیل در نظرسنجی جنگو، HTMX این‌قدر سریع بالا آمده: مدل هایپرمدیایی
که جنگو برایش ساخته شده را با انتظار UX دهه ۲۰۲۰ برمی‌گرداند.

راه‌اندازی حداقلی که در پروداکشن کار می‌کند

1. HTMX را اضافه کنید (CDN یا اسکریپت همراه django-htmx).
2. HtmxMiddleware را بگذارید تا ویوها روی request.htmx شاخه بزنند.
3. توکن CSRF را روی همه درخواست‌های HTMX بگذارید:

<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>

4. برای پاسخ‌هایی که فقط یک ناحیه را تازه می‌کنند، قالب partial
   (یا template partials جنگو ۶) ترجیح دهید.

def search(request):
    q = request.GET.get("q", "")
    results = Post.objects.filter(title__icontains=q)[:20]
    template = (
        "blog/partials/search_results.html"
        if request.htmx
        else "blog/search.html"
    )
    return render(request, template, {"results": results})

<input
  type="search"
  name="q"
  hx-get="{% url 'blog:search' %}"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#results"
  hx-swap="innerHTML"
/>
<div id="results"></div>

الگوهایی که فوری جواب می‌دهند

• فرم درجا: فرم را با hx-post بفرستید، ردیف یا خطای markup را برگردانید
  و همان ناحیه را عوض کنید.
• حذف با تأیید: hx-confirm + hx-delete بدون کتابخانه مودال UX تیز می‌دهد.
• پرداخت بصری: HTMX را با transitionهای کوچک CSS روی hx-swap جفت کنید.
• فقط state محلی: برای تب، دراپ‌داون و toggleهایی که سرور لازم ندارند از
  Alpine.js استفاده کنید.

خطوط قرمز

• برای درخواست HTMX کل base.html برنگردانید—fragment بفرستید.
• بررسی مجوز را در ویو نگه دارید؛ جابه‌جایی HTML همچنان HTTP است.
• برای گراف‌های پیچیده کلاینت (ویرایشگر canvas، آفلاین‌اول) ممکن است SPA هنوز
  ببرد. HTMX ضد جاوااسکریپت نیست؛ ضد فریم‌ورک‌های غیرضروری است.

چرا با استک پرتفوی جور است

اگر سایتتان از قبل قالب جنگو و Tailwind دارد، HTMX اجازه می‌دهد UX مدرن را
بدون نگه‌داری زنجیره Node برای هر تعامل نشان دهید. کارفرما سرعت تحویل
می‌بیند؛ شما یک مجموعه تست و یک استقرار نگه می‌دارید.

با جستجو، صفحه‌بندی یا فرم نظر شروع کنید. وقتی طبیعی شدند، برای محصولات
محتوامحور به‌ندرت دوباره سراغ SPA کامل می‌روید.