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` సహా స్వతంత్ర అభ్యర్థనలను ఒకేసారి ప్రారంభించండి కాబట్టి అవి ఒకదానికొకటి నిరోధించవు. ## కCliente కాంపోనెంట్‌లలో ఫెచ్ చేయండి ```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` కాల్‌లను — కాబట్టి మీరు ఒక లేআউట్ మరియు పేజీలో ఒకే డేటాను ఫెచ్ చేయవచ్చు రెండు అభ్యర్థన లేకుండా. ## ఇది ఎందుకు ముఖ్యమైనది server Components లో నేరుగా async డేటా ఫెచ్ చేయడం App Router యొక్క అతిపెద్ద సరళీకరణలలో ఒకటి — బాయిలర్‌ప్లేట్ లేదు, సురక్షితమైన సర్వర్-సైడ్ యాక్సెస్, స్వయంచాలక డీడుప్లికేషన్ మరియు ప్రతి-fetch కాష్ ఇది మీ SSG/SSR/ISR ఎంపిక వలె పనిచేస్తుంది. స్వతంత్ర ఫెచ్‌లను సమాంతరీకరించాలని (జలపాతాలను నివారించడానికి) తెలుసుకోవడం ముఖ్య పనితీరు ఆచరణ.