G
Günel RzayevaMüəllif
gunel.rzayeva@example.comReact Query (TanStack Query) vs SWR: Müştəri Keşləməsi
Müştəri tərəfdə server məlumatlarının asinxron sinxronizasiyası, arxa plan yenilənmələri və optimistik UI.
Bir çox veb tətbiqdə ən böyük qarışıqlıq Client State (müştəri vəziyyəti - modal açıqdır, menyu bağlıdır) ilə Server State-in (bazadan gələn məhsullar, postlar) eyni 'useState' və ya Redux içinə atılmasından yaranır.
Halbuki Server State tamamilə fərqli qaydalarla idarə olunmalıdır: o uzaqdadır, asinxrondur və istənilən an başqa bir istifadəçi tərəfindən dəyişdirilə bilər.
📌 1. Stale-While-Revalidate (SWR) Fəlsəfəsi
Həm Vercel SWR, həm də TanStack Query bu prinsiplə işləyir:
1. İstifadəçi səhifəyə daxil olanda dərhal keşdə olan köhnə məlumat göstərilir (istifadəçi heç bir boş ağ ekran və ya yüklənmə görmür).
2. Arxa planda səssizcə serverə sorğu gedir.
3. Əgər məlumat dəyişibsə, ekrandakı məlumat kəsintisiz yenilənir.
📌 2. Window Focus Revalidation
Əgər istifadəçi brauzerdə başqa taba keçib 5 dəqiqə sonra sizin saytınıza qayıtsa, React Query pəncərənin fokuslandığını ('refetchOnWindowFocus') aşkar edir və avtomatik ən son məlumatları çəkir. İstifadəçinin səhifəni F5 edib yeniləməsinə ehtiyac qalmır.
📌 3. Optimistik Yeniləmə (Optimistic Updates)
Məsələn, 'Like' düyməsinə basanda server cavabını 1 saniyə gözləmək əvəzinə ekranda dərhal ürək ikonu qırmızılaşır və sayğac 1 vahid artır. Əgər serverdə xəta baş verərsə, dəyişiklik səliqə ilə əvvəlki vəziyyətinə geri qaytarılır (Rollback).
←Bütün yazılara qayıtKateqoriya: React