React Query போன்ற சர்வர-நிலை நூலகத்தை ஏன் பயன்படுத்த வேண்டும்?

Question

Accepted Answer

**சர்வர-நிலை நூலகங்கள்** (React Query/TanStack Query, SWR, RTK Query) **சர்வரில் இருந்து பெறப்பட்ட தரவை** நிர்வகிப்பதில் சிறப்பாக உள்ளன — இதை தொலைநிலை மூலத்துடன் ஒத்திசைக்க வைக்க கேச் என்று கருதுகின்றன. அவை caching, loading/error நிலைகள், re-fetching, மற்றும் deduplication ஐ தானாகவே நிர்வகிக்கின்றன, இது பெரும்பாலான கையேடு குறியீட்டை மாற்றுகிறது. ## சிக்கல்: சர்வர் தரவு UI நிலை போல் இல்லை சர்வர் தரவு *சர்வரால்소유* மற்றும் கிளையன்டில் வெறுமனே கேச் செய்யப்பட்டுள்ளது, எனவே இது **பழையதாக** இருக்கலாம். கையேடு நிர்வகனை கொண்டு caching, loading/error ট্র্যাকிং், re-fetching, மறுপ্রயাசங்கள் மற்றும் deduplication ஐ ஒவ்வொரு endpoint க்கும் மீண்டும் செயல்படுத்த வேண்டும் — தவறுக்கு உட்பட்ட மற்றும் மீண்டும் நிகழும். ## React Query ஒரு hook இல் உங்களுக்கு என்ன கொடுக்கிறது ```jsx import { useQuery } from "@tanstack/react-query"; function Users() { const { data, isLoading, error, refetch } = useQuery({ queryKey: ["users"], // cache key queryFn: () => fetch("/api/users").then(r => r.json()), staleTime: 60_000, // consider fresh for 1 min }); if (isLoading) return ; if (error) return ; return ; } ``` இந்த ஒற்றை hook வழங்குகிறது: ```text ✓ Caching — data cached by queryKey, shared across components ✓ Loading/error — isLoading/error states managed for you ✓ Deduplication — same query in 5 components = ONE network request ✓ Background refetch— refetch on window focus/reconnect to stay fresh ✓ Stale-while-revalidate — show cached data instantly, refetch in background ✓ Retries — auto-retry failed requests ✓ Pagination/infinite scroll, prefetching, cache invalidation ``` ## Mutations + cache invalidation ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch the list }); ``` மாற்றத்திற்குப் பிறகு, நீங்கள் தொடர்புடைய query ஐ invalidate செய்து cache ஐ மீண்டும் பெறுகிறீர்கள் — UI ஐ சர்வரின் சாথ சாம்யம் வைத்திருக்கிறது. ## இது உங்கள் "global state" தேவைகளைக் குறைக்கிறது ```text Much of what people put in Redux is actually SERVER state. Moving it to React Query often shrinks global state to just true UI state (theme, modals, filters) — simplifying the whole app. ``` ## ஏன் இது முக்கியமாக இருக்கிறது சர்வர-நிலை நூலகங்கள் ஒரு சிக்கலை தீர்க்கின்றன, இதை பொதுவான நிலை கருவிகள் (Redux, useState) மோசமாக சামாளிக்கின்றன: கிளையன்ட் கேச் ஐ தொலைநிலை தரவின் சாথ ஒத்திசைக்க வைப்பது। இவை நூற்றுக்கணக்கான வரிகளான கையேடு fetching/caching/loading logic ஐ declarative hooks உடன் மாற்றுகின்றன, மற்றும் sophisticated நடத்தை (dedup, background refetch, stale-while-revalidate) வழங்குகின்றன, இது கையால் சரியாகக் கட்ட கடினமாக உள்ளது। சர்வர் நிலை அதன் சொந்த dedicated கருவிக்கு योग்य என்பதை அறிந்துகொள்ளுதல் — மற்றும் ஒன்றை ஏற்றுக்கொள்வது பெரும்பாலும் global state ஐ வியத்திற்குரியாக எளிமைப்படுத்துகிறது — இது மிகவும் প்रभावशाली আধुनிக frontend வாস்தु அந்தர்ज्ञान ஆகும்।