Performance با Caching — Part 1

در Frontend فقط به کاهش حجم باندل یا بهینه‌سازی CSS و JS خلاصه نمی‌شه.
یکی از مهم‌ترین عوامل تجربه سریع و روان کاربر، Caching هست.
اما اکثر تیم‌ها وقتی از caching حرف می‌زنن، فقط به فکر localStorage یا چند header HTTP هستن جلوتر براتون توضیح میدم دقیقا چجوری میشه پرفورمنسو بهترش کرد و از سمتی یه ابزار خفن هم داریم که به شما خیلی کمک خواهد کرد.

هدف این پارت: کشف دقیق caching، انواعش و چگونگی تاثیرش روی Performance.

Caching چیه؟

Caching یعنی ذخیره‌ی موقت داده یا منابع به گونه‌ای که دفعه بعد نیاز به بارگذاری مجدد نداشته باشه.

• داده‌ها دوباره fetch نمی‌شن

• کاربر تجربه سریع‌تری خواهد داشت

• فشار روی سرور و شبکه کم می‌شه

در Frontend، چند سطح caching داریم: Runtime، Build-time و Persistent (LocalStorage / IndexedDB).

نکته کلیدی: انتخاب استراتژی مناسب caching، تاثیر مستقیم روی Performance و معماری پروژه دارد.

1. Runtime caching

   • داده‌هایی که تو حافظه برنامه نگه‌داشته می‌شن

   • مثال: Map یا state محلی برای جلوگیری از fetch تکراری

   • مزیت: سریع‌ترین دسترسی، بدون درخواست شبکه

2. Build-time caching

   • داده‌ها یا assetهایی که هنگام build تولید می‌شن و تغییر نمی‌کنن

   • مثال: CSS، JS bundle، تصاویر بهینه‌شده

   • مزیت: کاهش load روی سرور و مرورگر

3. Persistent caching (LocalStorage / IndexedDB)

   • داده‌ها روی مرورگر ذخیره می‌شن و بین سشن‌ها باقی می‌مونن

   • مزیت: کاهش fetchهای بعدی و تجربه کاربر سریع‌تر

چرا Caching مهمه؟

• کاهش تعداد request ها → کاهش زمان بارگذاری

• کاهش فشار روی سرور و شبکه → مقیاس‌پذیری بهتر

• افزایش سرعت perceived load → تجربه کاربر بهتر

• ارتباط مستقیم با معماری → اگر درست تعریف نشه، بعداً تغییرش پرهزینه می‌شه

تجربه واقعی: پروژه‌ای داشتم که تمام داده‌های API بدون cache بارگذاری می‌شد.
نتیجه: حتی با کد بهینه، هر بار که کاربر صفحه را رفرش می‌کرد، 2–3 ثانیه اضافی load اضافه می‌شد.
بعد از پیاده‌سازی runtime + persistent caching، TTI از 4.5s به 1.8s رسید.

مثال (Runtime Caching)

 const cache = new Map();

async function fetchUserData(userId) {

  if (cache.has(userId)) {

    return cache.get(userId); // استفاده از داده کش‌شده

  }

  const response = await fetch/api/users/${userId});

  const data = await response.json();

  cache.set(userId, data); // ذخیره در cache

  return data;

• مزیت: دفعه بعد که همون کاربر فراخوانی می‌شه، request به شبکه نمی‌ره

• تاثیر: کاهش latency و تجربه سریع‌تر کاربر

ابزار خفن: TanStack Query

حالا یک ابزار فوق‌العاده داریم که تمام کارهای caching runtime را برای ما ساده می‌کنه:

• ذخیره‌سازی داده‌ها به صورت خودکار

• Refresh و invalidation هوشمند

• Background fetching برای تجربه کاربری سریع

می‌تونید ببینید پشت پرده چجوری کار می‌کنه و پیشنهاد می‌کنم حتماً استفاده‌اش کنید.

مثال ۱ — Query ساده

import { useQuery } from '@tanstack/react-query';

function fetchUser(userId) {
  return fetch(`/api/users/${userId}`).then(res => res.json());
}

export function User({ userId }) {
  const { data, isLoading } = useQuery(['user', userId], () => fetchUser(userId), {
    staleTime: 1000 * 60 * 5, // 5 دقیقه cache
  });

  if (isLoading) return <div>Loading...</div>;
  return <div>{data.name}</div>;
}

دفعه بعد که همین userId فراخوانی بشه، داده از cache گرفته می‌شه و request اضافی نمی‌ره.

مثال ۲ — استفاده از Cache با Invalidaton

const queryClient = useQueryClient();

function updateUser(userId, newData) {
  return fetch(`/api/users/${userId}`, {
    method: 'POST',
    body: JSON.stringify(newData),
  }).then(() => {
    queryClient.invalidateQueries(['user', userId]); // داده قدیمی refresh می‌شه
  });
}

جمع‌بندی

• Caching یعنی ذخیره موقت داده یا منابع برای بارگذاری سریع‌تر

• Performance واقعی از تصمیمات درست در caching و معماری حاصل می‌شه

• ابزارهایی مثل TanStack Query می‌تونن همه این اصول را برای ما ساده و عملی کنند

در Part 2 قراره ببینیم چطور Lazy-loading، Preload و Cache Expiration رو در پروژه واقعی مدیریت کنیم تا Performance واقعاً بهینه بشه.

با من همراه باشین :)