intermediate
App Router
Используйте layouts, nested routes, loading/error files, Server Components и route segment configuration.
App Router сопоставляет каталог `app/` с маршрутами: вложенные layouts, loading UI, error boundaries и Server Components по умолчанию. Каждая папка — сегмент; `page.tsx` делает маршрут публичным; `layout.tsx` оборачивает дочерние сегменты и сохраняет состояние при навигации.
// app/dashboard/layout.tsx — общая оболочка для /dashboard/*
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return <section>{children}</section>;
}
Route segment config (`dynamic`, `revalidate`, `fetchCache`) управляет кэшем и рендерингом на сегмент. Loading и error файлы локализуют Suspense и сбои без блокировки соседних маршрутов.
На интервью: объясните вложенные layouts, дефолт Server Components и когда сегмент становится dynamic.
Типовые ошибки: `use client` на всём дереве, ранняя сложность parallel routes, ожидание полного refetch layouts при каждой навигации.
Компромисс: colocated файлы маршрутов против когнитивной нагрузки дерева сегментов — нужны командные соглашения.
Чеклист:
- Разделяйте layout и page.
- Server Components по умолчанию; client — осознанно.
- Явно настраивайте кэш сегмента.
- loading.tsx для perceived latency.