Настя Котова // Frontend & Node.js: “Server Components и Server Actions. Часть 2. В предыдущем посте мы пог…”

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

В предыдущем посте мы поговорили про Server Components, а сегодня рассмотрим Server Actions.

Ранее, когда мы рассказывали про новые хуки React, мы уже посмотрели на примерах, как можно работать с серверными экшенами в сочетании с хуком useActionForm (вот здесь можно почитать подробнее).

Но на самом деле нам не обязательно использовать новые хуки React или даже серверные компоненты для работы с серверными экшенами.

Посмотрим на пример простого компонента со списком товаров. Он также осуществляет поиск товаров по строке через внешнее API, в которое передается поисковый запрос:

'use client';
import { useState } from 'react';
import { search } from './searchAction';

export function SearchedList({ fetchInitialData }: Props) {
  const [searchText, setSearchText] = useState('');
  const [data, setData] = useState<SearchResponce | null>(null);

  const handleChangeSearch = (event) => setSearchText(event.target.value);

  const handleClick = async () => {
    const result = await search(searchText);
    setData(result);
  };

  return (
    <section>

      <div>
        <input name="search" onChange={handleChangeSearch} value={searchText} />
        <button type="submit" onClick={handleClick}>Search</button>
      </div>
      {data && (
        <ul>
          {data.products.map((product) => (
            ...
         ))}
        </ul>
      )}
    </section>
  );
}

Здесь search выглядит как обычная функция, но на самом деле это серверный экшен. Делает её таким директива 'use server'.

'use server';

export const search = async (query: string) => {
  console.log('[SearchedList] Server Action');
  const data = (await fetch(`https://dummyjson.com/products/search?limit=10&q=${query}`).then((res) => res.json()));
  return data;
};

В чем отличия серверного экшена

🔹 Серверный экшен выполняется только на сервере.

В нашем примере вывод в консоль '[SearchedList] Server Action' будет выполнен на сервере. Если бы это была обычная функция, то этот вывод был бы в консоли браузера.

🔹 Общение между клиентом и сервером для серверных экшенов происходит посредством специальных API-зпросов.

При клике на кнопку Search в браузере будет происходить POST-запрос на тот же URL, на котором мы находимся (локально это http://localhost:3000/).
В ответ придут данные в специальном формате:

0:["$@1",["development",null]]
1:{"products":[{"id":101,"title":"Apple AirPods Max Silver","description":"The...

Таким образом нам не нужно добавлять новый эндпоинт в API, в коде мы получаем эти данные, как если бы мы просто вызвали какую-то функцию. При этом внутри функции search вместо запроса к внешнему API может быть запрос на чтение из файла или напрямую из базы данных.

Кроме этого мы можем передать promise из серверного экшена как пропс в наш клиентский компонент:

import { search } from './searchAction';

export function SearchedList() {
  const fetchInitialData = search('');

  return (
    <Suspense fallback="Loading...">
      <SearchedListBase fetchInitialData={fetchInitialData} />
    </Suspense>
  );
}

И дальше использовать новый метод use для того, чтобы дождаться результат его выполнения и применить как initialValue в хуке useState:

type Props = {
  fetchInitialData: Promise<SearchResponce>;
};

export function SearchedList({ fetchInitialData }: Props) {
  const initialData = use(fetchInitialData);
  const [data, setData] = useState<SearchResponce>(initialData);
  ...
}

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

Я считаю, что появление Server Components и Server Actions приближает ту эпоху, когда фронтендеру нужно уметь работать не только в среде браузера, но и быть немного бэкендером. Новые инструменты, с одной стороны, предоставляют много новых возможностей, в том числе и для оптимизации. Но как и со всеми новыми технологиями, нужно знать, как их готовить.

✍️ А как cчитаете вы - поделитесь в комментариях, что думаете о развитии React в сторону серверных компонетов и экшенов!