Настя Котова // Frontend & Node.js: “Server Components и Server Actions. Часть 1. Саму концепцию серверных…”

Server Components и Server Actions. Часть 1.

Саму концепцию серверных компонентов нам представили еще несколько лет назад. В том числе, она активно используется в 14 версии Next.js в App Router, который создатели фреймворка теперь предлагают по умолчанию для разработки новых приложений. Однако в React серверные компоненты и экшены были анонсированы только в 19 версии. Я решила посмотреть поподробнее, что это за покемоны.

Server Component - это неинтерактивный компонент, который работает исключительно на стороне сервера.

Server Action - это функция, которая работает на сервере, но может использоваться клиентским компонентом, например как пропс-промис, который передается в этот компонент.

Давайте посмотрим на ещё несколько интересных примеров работы с ними поподробнее. Для них будем использовать все тот же Next.js 15, который поддерживает React 19.

👀 По умолчанию в App Router все страницы и компоненты внутри них являются серверными, до тех пор, пока мы не указали обратное.

В чем особенности серверного компонента в сравнении с клиентским

🔹 Серверный компонент может быть асинхронным.

Пример простого серверного компонента, который получает данные из API другого сервиса и сразу же отображает их:

export async function List() {
  const data = (await fetch('https://dummyjson.com/products/search?limit=10').then((res) => res.json()));
  console.log('[List] Server Component Render');

  return (
    <ul>
      {data.products.map((product) => (
          <li key={product.id}>
            {product.id}: <b>{product.title}</b>
          </li>
       ))}
    </ul>
  );
}

Здесь нам не нужно дополнительное состояние loading внутри компонента, т.к. мы работаем в едином потоке. Вместо запроса к другому API, мы можем использовать запрос на чтение из файла или базы данных.

🔹 Серверный компонент рендерится только один раз на сервере.

Для компонента выше у нас будет всего лишь один вывод в консоль '[List] Server Component Render' - на сервере. При классическом Server Side Rendering таких выводов будет два - один на сервере, во время формирования HTML, и один на клиенте - во время гидратации. Для серверных же компонентов гидратация не нужна.

🔹 Серверный компонент не может рендерится напрямую в клиентском компоненте, но его можно передавать туда как props.

Рассмотрим пример, у нас есть компонент Switcher, который в зависимости от состояния отрисовывает один или другой компонент:

type ComponentType = 'list' | 'searchedList';

export function Switcher({ ListComponent, SearchedListComponent }: Props) {
  const [type, setType] = useState<ComponentType>('list');

  const handleClick = (newType: ComponentType) => () => setType(newType);

  return (
    <section>
      <div>
        <button onClick={handleClick('list')}>List</button>
        <button onClick={handleClick('searchedList')}>Searched List</button>
      </div>
      {type === 'list' ? ListComponent : SearchedListComponent}
    </section>
  );
}

Дальше как пропсы в этот компонент мы можем передать как клиентский компонент, так и серверный:

<Switcher
  // серверный компонент
  ListComponent={<List />}
  // клиентский компонент
  SearchedListComponent={<SearchedList />}
/>

🔹 При динамической подгрузке серверные компоненты передаются на клиент не в виде HTML, а в специальном формате

Вот как примерно выглядят пришедшие в браузер данные для новой страницы /about в нашем приложении на Next.js:

5:I["(app-pages-browser)/./node_modules/next/dist/client/link.js",...
6:I["(app-pages-browser)/...
7:I["(app-pages-browser)/...
2:{"name":"","env":"Server","owner":null}
1:D"$2"
4:{"name":"About","env":"Server","owner":null}
3:D"$4"
3:["$","div",null,{"className":"page_page__bHvK0","children":...
...

Из этой структуры React на клиенте сможет построить DOM-дерево, но при этом не будет производить процесса гидратации, так как серверные компоненты не обладают динамикой.

📂 Подробнее примеры можно посмотреть в нашем репозитории на GitHub.

А в следующей части поговорим про Server Actions.