Как получить данные в App Router?

Question

Accepted Answer

В App Router вы получаете данные **прямо внутри асинхронных Server Components** с помощью стандартного API `fetch` — нет `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 на стороне клиента. ## Стратегия кеширования устанавливается для каждого запроса 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: вместо выбора стратегии на уровне страницы вы контролируете кеширование на уровне получения данных. ## Параллельное получение данных для избежания каскадов ```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 для данных на стороне клиента, интерактивных или часто переvalidируемых данных. ## Дедупликация запросов Next.js автоматически **дедублирует** идентичные вызовы `fetch` при одной отрисовке — поэтому вы можете получить одни и те же данные в макете и странице без дублирования запроса. ## Почему это важно Прямое асинхронное получение данных в Server Components — это одно из самых больших упрощений App Router — без шаблонного кода, безопасный доступ на серверной стороне, автоматическая дедупликация и кеширование на уровне каждого запроса, которое служит также выбором вашей стратегии SSG/SSR/ISR. Знание о том, как параллелизировать независимые запросы (избегая каскадов), — это ключевая практика оптимизации производительности.