App Router లో మీరు డేటాను async Server Components లోపలికి నేరుగా ప్రామాణిక fetch API ని ఉపయోగించి పొందుతారు — getServerSideProps లేదు, useEffect లేదు, ప్రత్యేక డేటా పొర లేదు. Next.js కాష్ నియంత్రణలతో fetchని విస్తరించుకుంటుంది.
// 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 <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}
కాంపోనెంట్ సర్వర్పై నడుస్తుంది కాబట్టి, మీరు సరళంగా మీ డేటాను await చేసి దీన్ని ఉపయోగించుకుంటారు — క్లায়েంట్-సైడ్ useEffect + useState + లోడింగ్-స్థితి నృత్యం కంటే చాలా సులభం.
Next.js fetchని సంతరించుకుంటుంది కాబట్టి ప్రతిটి కాల్ దాని రెండరింగ్ ప్రవర్తనను ఎంచుకుంటుంది:
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 యొక్క ఏకీకృత నమూనా: పేజీ-స్థర వ్యూహాన్ని ఎంచుకోవడానికి బదులుగా, డేటా-ఫెచ్ స్థరంలో కాష్ను నియంత్రించుకుంటారు.
// ❌ 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 సహా స్వతంత్ర అభ్యర్థనలను ఒకేసారి ప్రారంభించండి కాబట్టి అవి ఒకదానికొకటి నిరోధించవు.
"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 ఎంపిక వలె పనిచేస్తుంది.
స్వతంత్ర ఫెచ్లను సమాంతరీకరించాలని (జలపాతాలను నివారించడానికి) తెలుసుకోవడం ముఖ్య పనితీరు ఆచరణ.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం