როგორ გამოიღებთ მონაცემებს 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` + loading-state-ის ცეკვა. ## ქეშირების სტრატეგია დაყენებულია ყოველი 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-ის ერთიანი მოდელი: გვერდის დონის სტრატეგიის არჩევის ნაცვლად, თქვენ კონტროლируете ქეშირებას მონაცემების fetch დონეზე. ## პარალელური fetching ჩამოვარდნების თავიდან აცილებისთვის ```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`-ით, ისე რომ მათ ერთმანეთი არ დაბლოკონ. ## Fetching Client Components-ში ```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 ფარავს უმეტეს საჭიროებებს; გამოიყენეთ SWR/React Query კლიენტ-მხარის, ინტერაქტიული ან ხშირად-გადამოწმების მონაცემებისთვის. ## მოთხოვნის დედუპლიკაცია Next.js ავტომატურად **აკრიფავს** იდენტური `fetch` მოწვევებს ერთი რენდერირების დროს — ამიტომ თქვენ შეგიძლიათ დაიღოთ მონაცემები ლეიআუტში და გვერდში მეორე მოთხოვნის გარეშე. ## რატომ აქვს მნიშვნელობა პირდაპირი async მონაცემების fetching Server Components-ში App Router-ის ერთ-ერთი უდიდესი გამარტივებაა — არ არის boilerplate, უსაფრთხო სერვერ-მხარეს წვდომა, ავტომატური დედუპლიკაცია, და ყოველი fetch-ის ქეშირება რომელიც რეორგანიზდება როგორც თქვენი SSG/SSR/ISR არჩევანი. მნიშვნელოვანი პერფორმანსის პრაქტიკა არის იმის ცოდნა, რომ უკუშოთ დამოუკიდებელი fetches (ჩამოვარდნების თავიდან აცილება).