V App Routeru načítáte data přímo uvnitř async Server Components pomocí standardního API fetch — žádný getServerSideProps, žádný useEffect, žádná samostatná datová vrstva. Next.js rozšiřuje fetch o ovládání cachování.
// 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>;
}
Proto že komponenta běží na serveru, jednoduše await vaše data a používáte je — mnohem jednodušší než tanec useEffect + useState + stav načítání na straně klienta.
Next.js rozšiřuje fetch tak, aby každé volání zvolilo své chování při renderování:
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
Toto je jednotný model App Routeru: namísto výběru strategie na úrovni stránky, kontrolujete cachování na úrovni načítání dat.
// ❌ 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()]);
Spusťte nezávislé požadavky dohromady s Promise.all, aby se navzájem neblokovali.
"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 pokrývají většinu potřeb; používejte SWR/React Query pro data na straně klienta, interaktivní nebo často revalidovaná data.
Next.js automaticky deduplikuje identická volání fetch v jednom renderování — takže můžete načíst stejná data v layoutu a stránce bez duplikovaného požadavku.
Přímé asynchronní načítání dat v Server Components je jedním z největších zjednodušení App Routeru — žádný boilerplate, bezpečný přístup na straně serveru, automatická deduplikace a cachování pro každý fetch, které slouží i jako vaše volba SSG/SSR/ISR.
Znalost paralelizace nezávislých fetchů (aby se zabránilo kaskádám) je klíčová praktika výkonu.