App Router-இல் நீங்கள் தரவுகளை எவ்வாறு பெறுகிறீர்கள்?

Question

Accepted Answer

App Router-இல் நீங்கள் தரவுகளை **async Server Components-க்குள் நேரடியாக** நிலையான `fetch` API ஐ பயன்படுத்தி பெறுகிறீர்கள் — `getServerSideProps` இல்லை, `useEffect` இல்லை, தனிப்பட்ட தரவு அடுக்கு இல்லை. Next.js `fetch`-ஐ கேச் கட்டுப்பாடுகளுடன் விரிவாக்குகிறது. ## அடிப்படை வடிவமை ```tsx // app/posts/page.tsx — a Server Component export default async function Posts() { const res = await fetch("https://api.example.com/posts"); // runs on the server const posts = await res.json(); return

{p.title}

; } ``` கூறு சேவையகத்தில் இயங்குவதால், நீங்கள் எளிதாக உங்கள் தரவுகளை `await`-செய்து அவற்றைப் பயன்படுத்துகிறீர்கள் — கிளையன்ட்-பக்கத்தில் `useEffect` + `useState` + ஏற்றல் நிலை நடனத்தை விட மிகவும் எளிமையானது. ## கேச் உத்தி ஒவ்வொரு-fetch-க்கும் அமைக்கப்பட்டுள்ளது Next.js `fetch`-ஐ விரிவாக்குகிறது, எனவே ஒவ்வொரு அழைப்பும் அதன் ரெண்டரிங் நடத்தையைத் தேர்ந்தெடுக்கிறது: ```tsx fetch(url, { cache: "force-cache" }); // SSG — cached (default for static) fetch(url, { cache: "no-store" }); // SSR — fresh every request fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation ``` இது App Router-ன் ஒருங்கிணைந்த மாதிரி: பக்க-நிலை உத்தியைத் தேர்ந்தெடுப்பதற்குப் பதிலாக, நீங்கள் தரவு-உபயோக-நிலையில் கேச் நுண்ணறிவைக் கட்டுப்படுத்துகிறீர்கள். ## நீரியல்களைத் தவிர்க்க இணைத்து பெறுங்கள் ```tsx // ❌ sequential — each awaits the previous (slow waterfall) const user = await getUser(); const posts = await getPosts(); // ✅ parallel — both start at once const [user, posts] = await Promise.all([getUser(), getPosts()]); ``` `Promise.all`-உடன் சுதந்திர வேண்டுகோள்களைத் தொடங்குங்கள், இதனால் அவை ஒருவரையொருவர் தடுக்கவில்லை. ## கிளையன்ட் கூறுகளில் பெறுங்கள் ```tsx "use client"; // for client-side data (e.g. after interaction), use a library like SWR or React Query const { data } = useSWR("/api/user", fetcher); ``` சேவையக கூறுகள் பெரும்பாலான தேவைகளை உள்ளடக்குகின்றன; கிளையன்ட்-பக்க, ইন்டারঅ্যাக்টிவ் அல்லது அடிக்கடி-மீறாய்ந்த தரவுக்கு SWR/React Query ஐப் பயன்படுத்தவும். ## வேண்டுகோள் நகல் நீக்கம் Next.js தானாக **நகல் நீக்கம் செய்கிறது** ஒரு ஆக்கத்தில் ஒரே மாதிரியான `fetch` அழைப்புக்கள் — எனவே ஒரு மாதிரி மற்றும் பக்கத்தில் ஒரே தரவைப் பெறலாம் மற்றும் இரட்டை வேண்டுகோள் இல்லை. ## ஏன் இது முக்கியமாக இருக்கிறது சேவையக கூறுகளில் நேரடி ஒத்திசைவு ரहित தரவு பெறுங்கள் என்பது App Router-ன் மிகப்பெரிய எளிமைகளில் ஒன்று — எந்த வெற்று தட்டையும் இல்லை, பாதுகாப்பான சேவையக-பக்க அணுகல், தானாக நகல் நீக்கம் மற்றும் ஒவ்வொரு-fetch கேச் இது உங்கள் SSG/SSR/ISR தேர்வாக செயல்படுகிறது. சுதந்திர பெறுங்கள்களை இணைய மூலம் (நீரியல்களைத் தவிர்த்து) எழுபது என்பது முக்கிய செயல்திறன் நடைமுறை.