Kaip gauti duomenis App Router?

Question

Accepted Answer

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. ## Pagrindinė šablono ```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}

; } ``` 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. ## Talpinimo strategija nustatoma kiekvienai gavybai Next.js pagalinėja `fetch`, kad kiekvienas kvietimas pasirinktu savo atvaizdinimo elgesį: ```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 ``` Tai yra App Router suvienytasis modelis: užuot pasirinkę puslapio lygio strategiją, jūs kontroliuojate talpinimą duomenų gavybos lygiu. ## Lygiagrečioji gavyba, siekiant išvengti vandens krioklio ```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()]); ``` Pradėkite nepriklausomus prašymus kartu su `Promise.all`, kad jie nepersidengtu. ## Gavyba kliento komponentuose ```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); ``` Server Components apima daugumą poreikių; naudokite SWR/React Query kliento pusės, interaktyviems arba dažnai revaliduojamiems duomenims. ## Prašymo deduplikacija 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. ## Kodėl tai svarbu 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.