> Как заставить useSWR отрабатывать только на клиенте, пропуская сервер (React, JavaScript)

Чтобы заставить useSWR работать только на клиенте и не выполняться на сервере, можно использовать несколько подходов. Самый простой - проверить, что код выполняется в браузерном окружении, с помощью typeof window !== 'undefined' или хука useEffect. Вот пример:

JSX
import useSWR from 'swr';
import { useEffect, useState } from 'react';

function MyComponent() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  // useSWR будет вызван только на клиенте
  const { data, error } = isClient ? useSWR('/api/data', fetcher) : { data: null, error: null };

  if (!isClient) return null; // или заглушка для сервера
  if (error) return <div>Ошибка загрузки</div>;
  if (!data) return <div>Загрузка...</div>;

  return <div>{data}</div>;
}

Другой вариант - использовать условный вызов useSWR внутри хука, который гарантированно выполняется только на клиенте, например, через кастомный хук с проверкой:

JSX
function useClientSWR(key, fetcher) {
  const [shouldFetch, setShouldFetch] = useState(false);
  useEffect(() => setShouldFetch(true), []);
  return shouldFetch ? useSWR(key, fetcher) : { data: undefined, error: undefined };
}

Это предотвращает выполнение запросов на сервере при SSR, избегая ошибок гидратации и лишних вызовов API.