Ты упомянул Server Components. В Pages Router нет Server Components. Изучал ли ты App Router? Был ли опыт с ним?

App Router в Next.js — это новая система маршрутизации, которая поддерживает Server Components, что позволяет выполнять рендеринг на сервере и улучшать производительность и SEO. В отличие от Pages Router, где компоненты рендерятся преимущественно на клиенте, App Router позволяет создавать гибридные приложения с разделением логики между сервером и клиентом.

Опыт работы с App Router включает создание папки app в проекте, где каждая папка соответствует маршруту, и использование файлов page.js для определения страниц. Server Components в App Router не содержат клиентский код и могут напрямую обращаться к базе данных или API без передачи лишних данных на клиент.

Пример простого Server Component в App Router:

// app/page.js
export default async function Page() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{data.title}</div>;
}

Здесь компонент рендерится на сервере, данные загружаются до отправки HTML клиенту.