Kuinka haet tietoja App Routerissa?

Question

Accepted Answer

App Routerissa haet tietoja **suoraan async Server Components:n sisällä** käyttäen vakio `fetch` API:a — ei `getServerSideProps`:ia, ei `useEffect`:ia, ei erillistä data-kerrosta. Next.js laajentaa `fetch`:ää välimuistin ohjausobjekteilla. ## Peruskaava ```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}

; } ``` Koska komponentti suoritetaan palvelimella, yksinkertaisesti `await`:aat tietosi ja käytät niitä — paljon yksinkertaisempi kuin asiakakaupunkisen `useEffect` + `useState` + lataustilatanssi. ## Välimuististrategia asetetaan per-fetch Next.js laajentaa `fetch`:ää niin, että jokainen kutsu valitsee oman renderöintikäyttäytymisensä: ```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 ``` Tämä on App Routerin yhtenäinen malli: sen sijaan, että valitsisit sivutason strategian, hallitset välimuistia data-fetch-tasolla. ## Rinnakkainen haku kaskadingin välttämiseksi ```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()]); ``` Käynnistä itsenäiset pyynnöt yhdessä `Promise.all`:n kanssa, jotta ne eivät estä toisiaan. ## Haku Client Componentseissa ```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 kattavat useimmat tarpeet; käytä SWR/React Query asiakaspuolen, vuorovaikutteisten tai usein revalidoitavien tietojen osalta. ## Pyynnön deduplikaatio Next.js **poistaa duplikaatit** automaattisesti identtisistä `fetch` kutsuista yhden renderöinnin aikana — joten voit hakea samoja tietoja asettelussa ja sivulla ilman kaksoisalusta. ## Miksi se on tärkeää Suora async-datan haku Server Componentseissa on yksi App Routerin suurimmista yksinkertaistuksista — ei boilerplate:a, turvallinen palvelinpuolen pääsy, automaattinen deduplikaatio ja per-fetch välimuisti, joka toimii myös SSG/SSR/ISR-valintanasi. Tieto itsenäisten hakujen rinnakkaistamisesta (kaskadingin välttämisestä) on keskeinen suorituskykyyn liittyvä käytäntö.