Πώς ανακτάτε δεδομένα στο App Router;

Question

Accepted Answer

Στο App Router ανακτάτε δεδομένα **απευθείας μέσα σε async Server Components** χρησιμοποιώντας το standard `fetch` API — χωρίς `getServerSideProps`, χωρίς `useEffect`, χωρίς ξεχωristό data layer. Το Next.js επεκτείνει το `fetch` με έλεγχο caching. ## Το βασικό πρότυπο ```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}

; } ``` Επειδή το component εκτελείται στον server, απλώς `await`ενετε τα δεδομένα σας και τα χρησιμοποιείτε — πολύ απλούστερο από το client-side `useEffect` + `useState` + loading-state χορό. ## Η στρατηγική caching ορίζεται ανά-fetch Το Next.js επαυξάνει το `fetch` ώστε κάθε κλήση να επιλέγει τη δική της συμπεριφορά rendering: ```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: αντί να επιλέγετε μια στρατηγική επιπέδου σελίδας, ελέγχετε το caching στο επίπεδο data-fetch. ## Ταυτόχρονη ανάκτηση για αποφυγή cascading ```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` ώστε να μην μπλοκάρουν το ένα το άλλο. ## Ανάκτηση στα 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 για client-side, διαδραστικά ή συχνά-revalidating δεδομένα. ## Αποδιπλασιασμός αιτήματος Το Next.js αυτόματα **αποδιπλασιάζει** ταυτόσημες κλήσεις `fetch` σε ένα ενιαίο render — έτσι μπορείτε να ανακτήσετε τα ίδια δεδομένα σε ένα layout και μια σελίδα χωρίς διπλό αίτημα. ## Γιατί έχει σημασία Η άμεση async ανάκτηση δεδομένων στα Server Components είναι μία από τις μεγαλύτερες απλοποιήσεις του App Router — χωρίς boilerplate, ασφαλής server-side πρόσβαση, αυτόματος αποδιπλασιασμός και per-fetch caching που λειτουργεί επίσης ως η επιλογή SSG/SSR/ISR σας. Το να γνωρίζετε πώς να παραλληλοποιείτε ανεξάρτητες ανακτήσεις (αποφυγή cascading) είναι η βασική πρακτική performance.