Загрузка в RSC против клиентского кэша

Для начальных данных на запрос грузи на сервере: await прямо в серверном компоненте. В App Router компонент по умолчанию серверный. Он может быть async, сделать await твоих данных и отрендерить результат — загрузка происходит во время запроса, до того как HTML дойдёт до браузера, без спиннера загрузки, без useEffect и без отправки клиентского JavaScript под эту загрузку.

// app/orders/page.tsx — серверный компонент (без "use client")
async function OrdersPage() {
  const orders = await getOrders();         // выполняется на сервере, на запрос
  return (
    <ul>
      {orders.map((o) => <li key={o.id}>{o.total}</li>)}
    </ul>
  );
}
export default OrdersPage;

Клиентского кэша здесь нет и не нужно: данные вычисляются заново на каждый запрос и встраиваются в HTML. Это вариант по умолчанию, к которому стоит тянуться первым.

Тянись за библиотекой клиентского кэша, когда нужна семантика клиентского кэша, а не просто данные. RSC await даёт значение один раз. Query-библиотека (TanStack Query, SWR) даёт кэш по ключу запроса: она дедуплицирует одновременные запросы, мгновенно отдаёт устаревшие данные, ревалидируя в фоне, делает refetch на фокус/переподключение, опрашивает по интервалу и предоставляет loading/error/isFetching, не заставляя тебя их разводить руками. Ничего из этого нет в одноразовом серверном await.

"use client";
import { useQuery } from "@tanstack/react-query";

function Orders() {
  const { data, isPending, error, refetch } = useQuery({
    queryKey: ["orders"],
    queryFn: getOrders,
    staleTime: 30_000,            // отдавать из кэша 30с до ревалидации
    refetchOnWindowFocus: true,   // фоновое обновление, когда вкладка снова в фокусе
  });
  if (isPending) return <Spinner />;
  if (error) return <Error onRetry={refetch} />;
  return <OrderList orders={data} />;
}

Если два компонента просят ["orders"], библиотека делает один запрос и делит его между ними. Этот дедуп + кэш и есть весь смысл подключать клиентскую библиотеку.

Мутации, оптимистичные обновления и polling — однозначно территория клиентского кэша. Серверный компонент рендерится один раз и исчезает — он не может перезапуститься по клику кнопки. В тот момент, когда UI должен изменить данные и отразить это, тебе нужен клиентский кэш, чтобы мутация могла инвалидировать или пропатчить закэшированный запрос и вызвать перерисовку. useMutation из TanStack (или mutate из SWR) снимает снимок кэша, применяет оптимистичное значение и откатывается при ошибке.

"use client";
import { useMutation, useQueryClient } from "@tanstack/react-query";

function ToggleFavorite({ id }: { id: string }) {
  const qc = useQueryClient();
  const m = useMutation({
    mutationFn: () => toggleFavorite(id),
    onMutate: async () => {
      await qc.cancelQueries({ queryKey: ["orders"] });
      const prev = qc.getQueryData(["orders"]);
      qc.setQueryData(["orders"], optimisticToggle(id));  // мгновенный UI
      return { prev };
    },
    onError: (_e, _v, ctx) => qc.setQueryData(["orders"], ctx?.prev), // откат
    onSettled: () => qc.invalidateQueries({ queryKey: ["orders"] }),  // сверка
  });
  return <button onClick={() => m.mutate()}>★</button>;
}

Polling (refetchInterval) и refetchOnReconnect — та же история: непрерывная, управляемая клиентом свежесть, которую RSC попросту дать не может.

Загрузка в useEffect — это режим отказа всякий раз, когда доступен RSC или query-библиотека. Классический useEffect(() => { fetch().then(setData) }, []) плохо переизобретает библиотеку кэша: в нём гонка (устаревший ответ может прийти после более нового и перезаписать его, если не вести флаг ignore), он никогда не дедуплицирует (каждое монтирование грузит заново), у него нет кэша (ушёл и вернулся — грузим с нуля) и он заставляет каждый раз вручную разводить loading/error. Собственная документация React помечает загрузку данных в эффектах как то, что обычно не нужно.

// ❌ антипаттерн, ради вывода которого существует этот урок
useEffect(() => {
  let ignore = false;                       // костыль против гонки
  setLoading(true);
  fetch(`/api/orders`)
    .then((r) => r.json())
    .then((d) => { if (!ignore) setData(d); })
    .catch((e) => { if (!ignore) setError(e); })
    .finally(() => { if (!ignore) setLoading(false); });
  return () => { ignore = true; };
}, []);                                      // ни кэша, ни дедупа, всё руками

Используй эффект для загрузки, только когда у тебя нет ни серверного компонента (например, чистый SPA без RSC), ни query-библиотеки — да и тогда query-библиотека обычно дешевле по суммарной стоимости.