App Router jūs gaunate duomenis tiesiogiai asinchr Server Components viduje naudodami standartinį fetch API — be getServerSideProps, be useEffect, be atskiro duomenų sluoksnio. Next.js išplečia fetch talpinimo kontrolėmis.
// 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>;
}
Kadangi komponentas veikia serveryje, jūs tiesiog await savo duomenis ir juos naudojate — daug paprasčiau nei kliento pusės useEffect + useState + loading-state šokis.
Next.js pagalinėja fetch, kad kiekvienas kvietimas pasirinktu savo atvaizdinimo elgesį:
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
Tai yra App Router suvienytasis modelis: užuot pasirinkę puslapio lygio strategiją, jūs kontroliuojate talpinimą duomenų gavybos lygiu.
// ❌ 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()]);
Pradėkite nepriklausomus prašymus kartu su Promise.all, kad jie nepersidengtu.
"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 apima daugumą poreikių; naudokite SWR/React Query kliento pusės, interaktyviems arba dažnai revaliduojamiems duomenims.
Next.js automatiškai deduplicina identiškus fetch kvietimus per vieną atvaizdinimą — todėl galite gauti tuos pačius duomenis maketą ir puslapyje be dvigubos užklausos.
Tiesioginė asinchroninė duomenų gavyba Server Components yra vienas iš didžiausių App Router supaprastinimų — joks boilerplate, saugus serverio prieiga, automatinė deduplikacija ir kiekvienos gavybos talpinimas, kuris veikia kaip jūsų SSG/SSR/ISR pasirinkimas.
Žinoti, kaip paralelinti nepriklausomus duomenų šaltinius (venkant vandens krioklio), yra pagrindinė efektyvumo praktika.