وقتی روی فرم جستجو هر keypress مستقیماً درخواست به سرور بفرستد، هم backend تحت فشار می‌رود هم UI کند می‌شود. یک الگوی ساده با debounce کمک می‌کند فقط وقتی کاربر چند لحظه تایپ را متوقف کرد، درخواست زده شود. 🔎

ایده این است: هر بار کاربر تایپ می‌کند، یک timeout قبلی لغو می‌شود و یک جدید تنظیم می‌شود. اگر تا مثلاً ۴۰۰ms چیزی تایپ نشد، تابع واقعی اجرا می‌شود (فراخوانی API، فیلتر لیست و ...).

✅ نتیجه:
- درخواست‌های کمتر به سرور
- UI روان‌تر
- کد تمیزتر نسبت به if/elseهای تکراری روی eventها

یک پیاده‌سازی ساده و عمومی در JS:

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const searchInput = document.querySelector('#search');

function handleSearch(e) {
  const q = e.target.value.trim();
  if (!q) return;
  // call API, fetch data, etc.
  console.log('Searching for:', q);
}

const debouncedSearch = debounce(handleSearch, 400);

searchInput.addEventListener('input', debouncedSearch);

بهتر است delay را بر اساس نوع ورودی تنظیم شود؛ برای جستجوی live معمولاً بین ۳۰۰ تا ۵۰۰ms معقول است. در UIهای سنگین (لیست‌های بزرگ، نمودارها و ...) debounce می‌تواند تفاوت محسوسی در performance ایجاد کند. 🚀

برای مطالعه بیشتر درباره الگوهای بهینه‌سازی eventها و performance در مرورگر:
MDN - Debouncing events

امتحان روی یک input ساده در پروژه فعلی کافی است تا تاثیرش روی روان بودن تجربه کاربری دیده شود. 😉

🔖 #Web #وب #Frontend #Backend #debounce #javascript #frontend #performance #web_dev

👤 Developix

💎 Channel: @DevelopixWeb

سرور اختصاصی تک‌نت؛ تحویل فوری، بدون قطعی ✅

🔹 پورت اختصاصی واقعی
🔹 آپلود رایگان
🔹 آپتایم 99.99% تضمینی
🔹 ارائه IP مازاد
🔹 پشتیبانی 24/7 (تیکت + آنلاین)
🔹 نصب سریع
🔹 پرداخت ماهیانه

⏳ ظرفیت محدود — همین الان تماس بگیر و سرویس رو رزرو کن:

📞 02191555530
🔗 https://taknet.ir/services/dedicated-server

ویراک کلود | تجربه‌ی ابری بدون محدودیت ☁️🚀

🎁 ۲۰٪ شارژ هدیه روی اولین واریزی

مزیت‌هایی که واقعاً فرق می‌سازن:
⚡️ پهنای باند 980 مگ
🌐با IP مازاد
⏱️ راه‌اندازی فوری
💳 پرداخت ساعتی
🛡 پشتیبانی ۲۴/۷

💬 هر سوالی داشتی، تیم ما کنارتـه
✅ مناسب استارتاپ‌ها، تیم‌های فنی، تا سازمان‌های بزرگ

همین الان شروع کن و با حداکثر منابع، سریع‌تر رشد کن 👇🏻

📞 تماس سریع: 02191555530
🔗 https://virakcloud.com

✨ ‏NextAuth.js؛ احراز هویت مدرن برای Next.js

اگه با Next.js کار می‌کنی و احراز هویت همیشه برات دردسر بوده، ‏NextAuth.js دقیقا برای همینه 👇

🔐 چیه و چی حل می‌کنه؟
یک کتابخونهٔ آماده برای اضافه‌کردن login/signup، session management و OAuth (مثل Google, GitHub, Twitter) بدون این‌که خودت از صفر Token و Cookie و Security رو هندل کنی.

🚀 ویژگی‌های مهم
• پشتیبانی از OAuth, Email/Password, Credentials
• Session سمت سرور، سازگار با SSR و Route Handlerهای Next.js
• تنظیمات قابل‌انعطاف و TypeScript‑friendly
• کار با DBهای مختلف (PostgreSQL, MySQL, MongoDB, Prisma و ...)

🛠️ نصب سریع

npm install next-auth

مثال ساده Route Handler در Next.js 13+

import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export const authOptions = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

برای پروژه‌های SaaS، پنل‌های ادمین یا هر اپ multi-user، استفاده از NextAuth.js هم سریع‌تره هم امن‌تر از نوشتن auth از صفر ✅

Docs رسمی:
https://next-auth.js.org
GitHub:
https://github.com/nextauthjs/next-auth

امتحانش کن و روی auth وقت کمتری بذار تا روی featureهای اصلی اپ 😉

🔖 #Web #وب #Frontend #Backend #NextAuth #Next_js #Authentication #OAuth #Web_Dev #JavaScript #TypeScript

👤 Developix

💎 Channel: @DevelopixWeb