> Какая проблема при вызове fetch напрямую в компоненте Next.js (JavaScript, Next.js)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Библио-Глобус

Стек: JavaScript, Next.js

> Пример ответа

Основная проблема при вызове fetch напрямую в компоненте Next.js - это отсутствие серверного рендеринга (SSR) и статической генерации (SSG) для полученных данных. Если вы используете fetch внутри useEffect или обработчика событий на клиенте, данные загружаются только после того, как компонент отрендерился в браузере. Это приводит к:

Потере SEO-оптимизации - поисковые роботы могут не дождаться загрузки данных и проиндексируют пустой контент.
Ухудшению производительности - пользователь видит пустой или скелетон-интерфейс до завершения запроса (waterfall-эффект).
Проблемам с кэшированием - Next.js не может предварительно сгенерировать страницу с данными, если запрос выполняется на клиенте.

Правильный подход - использовать встроенные методы Next.js для загрузки данных на сервере:

getServerSideProps (для SSR),
getStaticProps (для SSG),
Server Components (в App Router) с прямым await fetch().

Пример ошибки:

JSX
// ❌ Клиентский fetch - данные загружаются только в браузере
export default function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  return <div>{data?.title}</div>;
}

Правильный вариант (App Router):

JSX
// ✅ Серверный компонент - данные рендерятся на сервере
export default async function Page() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return <div>{data.title}</div>;
}