так а как мне добавить сср? У меня есть реакт-приложение, где я обращаюсь к window и document. Теперь я написал скрипт для сср, но он не работает, потому что очевидно документ из нот дефайн

никак

максимум юзерагент

везде, где ты обращаешься к браузерному апи, нужно перед обращением проверить, существует ли это апи. и в случае, если не существует (=== код выполняется в ssr) обработать правильным fallback’ом

а если нужно шоб сср не падало, то как дед советует

либо в вебпаке енвайроментс definePlugin ставить

и по ним будет те же самые проверки

если я меняю значение props через redux, то компонент перерисовывается. Однако у меня есть данные ,которые не участвуют в рендеринге. Как мне их привязать к хранилищу не через props?

Можете пожалуйста объяснить, что значит юзерагент и как сделать проверку, что если сср используем, то делать одно, иначе делать другое

Тебе же дед сказал

Юзерагент может иметь тип устройства, не помню уже. Но это боль и страдания если много таких моментов будет

Юзерагент это всего лишь строка, определяющая браузер

ну через юзерагент я могу проверить что я с мобилки или же с десктопа. А как проверить как я запустил приложуху, с ssr или же просто в браузере?

Добрейшего, подскажите, в чем может быть проблема. Не вызывается обработчик onFocus события картинки, картинка с помощью styled-components реализована.
Вот картинка.

<SmallImage
        active={true}
        onFocus={handleFocusImage}
        src="https://picsum.photos/200/200"
      />

Вот обработчик

const handleFocusImage = (event) => {
    console.log("123");
  };

Сам стиль картинки, если имеет значение

export const SmallImage = styled.div`
  cursor: pointer;
  margin: 4px 0;
  width: 100%;
  height: 100%;
  background-image: ${({ active }) =>
      !active &&
      `linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)),`}
    url(${(props) => props.src});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #f3f3f3;
`;

Картинка находится внутри div с absolute позиционированием, который в свою очередь обернут во Wrapper.

и что в этой строке? Название браузера только или еще его тип для нужного устройства? На сколько помню - нечто такое Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:55.0) Gecko/20100101 Firefox/55.0 и чаще всего это единственный вариант на уровне сср еще понять, что нам не нужно грузить для тех же массивов мобил N данные

На твой вопрос не отвечают потому что непонятен сам вопрос. Сформулируй иначе, а лучше покажи код

при такой проверке я теперь получаю что window is not defined

ну это псевдокод