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.
// 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>;
}
Koska komponentti suoritetaan palvelimella, yksinkertaisesti await:aat tietosi ja käytät niitä — paljon yksinkertaisempi kuin asiakakaupunkisen useEffect + useState + lataustilatanssi.
Next.js laajentaa fetch:ää niin, että jokainen kutsu valitsee oman renderöintikäyttäytymisensä:
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.
// ❌ 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.
"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.
Next.js poistaa duplikaatit automaattisesti identtisistä fetch kutsuista yhden renderöinnin aikana — joten voit hakea samoja tietoja asettelussa ja sivulla ilman kaksoisalusta.
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ö.