Серверные компоненты

Серверный компонент это компонент, который выполняется только на сервере или на этапе сборки. Его код и зависимости не попадают в клиентский бандл, клиент получает только результат рендера в специальном формате. Поэтому тяжёлую библиотеку для разбора markdown можно использовать на сервере бесплатно для пользователя.

Серверный компонент может быть асинхронным и читать данные прямо из базы или API с секретами, без отдельного эндпоинта. Ограничения: нет useState, useEffect, обработчиков и доступа к window.

Интерактивные части выносятся в клиентские компоненты с директивой 'use client', это граница: модуль и всё, что он импортирует, идёт в бандл. Серверный компонент может рендерить клиентский и передавать ему сериализуемые пропсы. Функцию-обработчик передать нельзя, можно только серверную функцию с 'use server'. Клиентский компонент не может импортировать серверный, но может получить его как children.

Важно не путать с SSR. SSR рендерит HTML для первого показа, а потом тот же код гидрируется. Серверные компоненты не гидрируются вовсе. В Next.js App Router используются оба механизма вместе.