App Router ਵਿੱਚ ਤੁਸੀਂ async Server Components ਦੇ ਅੰਦਰ ਸਿੱਧੇ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹੋ standard fetch API ਦੀ ਵਰਤੋਂ ਕਰਕੇ — ਕੋਈ getServerSideProps ਨਹੀਂ, ਕੋਈ useEffect ਨਹੀਂ, ਕੋਈ ਵੱਖਰਾ ਡੇਟਾ layer ਨਹੀਂ। Next.js ਨੇ fetch ਨੂੰ caching ਕੰਟਰੋਲ ਦੇ ਨਾਲ ਵਧਾਇਆ ਹੈ।
// 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 ਕਰਦੇ ਹੋ ਅਤੇ ਆਪਣਾ ਡੇਟਾ ਵਰਤਦੇ ਹੋ — client-side useEffect + useState + loading-state ਨਾਚ ਨਾਲੋਂ ਬਹੁਤ ਸਰਲ।
Next.js ਨੇ fetch ਨੂੰ ਵਧਾਇਆ ਹੈ ਤਾਂ ਕਿ ਹਰੇਕ ਕਾਲ ਆਪਣੀ rendering ਵਿਵਹਾਰ ਚੁਣੇ:
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 ਦਾ ਏਕੀਕ੍ਰਿਤ ਮਾਡਲ ਹੈ: page-level ਰਣਨੀਤੀ ਚੁਣਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ data-fetch ਪੱਧਰ ਉੱਤੇ caching ਨੂੰ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦੇ ਹੋ।
// ❌ 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);
Server Components ਬਹੁਤੇ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਦੇ ਹਨ; client-side, ਇੰਟਰਐਕਟਿਵ, ਜਾਂ ਅਕਸਰ-ਮੁੜ-ਪ੍ਰਮਾਣਿਤ ਡੇਟਾ ਲਈ SWR/React Query ਵਰਤੋ।
Next.js ਆਪਣੇ ਆਪ ਹੀ ਇੱਕ ਸਿੰਗਲ render ਵਿੱਚ ਸਮਾਨ fetch ਕਾਲਾਂ ਨੂੰ dedupe ਕਰਦਾ ਹੈ — ਇਸ ਲਈ ਤੁਸੀਂ layout ਅਤੇ page ਵਿੱਚ ਇੱਕੋ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ ਬਿਨਾ ਡਬਲ ਬੇਨਤੀ ਦੇ।
Server Components ਵਿੱਚ ਸਿੱਧੀ async ਡੇਟਾ ਪ੍ਰਾਪਤੀ App Router ਦੀਆਂ ਸਭ ਤੋਂ ਵੱਡੀਆਂ ਸਰਲੀਕਰਨਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ — ਕੋਈ boilerplate ਨਹੀਂ, ਸੁਰੱਖਿਅਤ server-side ਦਾ ਦਖਲ, ਖੁਦਕਾਰ deduping, ਅਤੇ per-fetch caching ਜੋ ਤੁਹਾਡੀ SSG/SSR/ISR ਚੋਣ ਨੂੰ ਦੁੱਗਣਾ ਕਰਦੀ ਹੈ।
ਸਵਤੰਤ੍ਰ fetches ਨੂੰ parallelize ਕਰਨ ਨੂੰ ਜਾਣਨਾ (ਜਲ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਰੋਕਿਆ ਜਾਵੇ) ਮੁੱਖ ਪ੍ਰਦਰਸ਼ਨ ਅਭਿਆਸ ਹੈ।