Блог

Фон
Я использую next.js для рендеринга на стороне сервера и react.js для стороны клиента.

Цель
Хочу выполнить условный рендеринг на основе размера окна на стороне сервера. Например, для A компонента рендеринга шириной 200 пикселей и для компонента рендеринга шириной 400 пикселей B .

Проблема
На стороне сервера у нас нет доступа к объекту window, и мы понятия не имеем об устройстве, используемом нашим клиентом. Итак, AFAIK, мы не можем выполнить условный рендеринг на стороне сервера.

Мысли
Я подумал о некоторых решениях, но не знаю, возможно это или нет —
1. Отправьте информацию об устройстве или объект window в формате json с http-запросом.
2. Не выполняйте рендеринг условных компонентов на стороне сервера и не выполняйте их повторный рендеринг (увлажнение) на стороне клиента.

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

Рассмотрите возможность использования следующего подхода:

1. На стороне сервера вы можете предсказать тип устройства, проанализировав пользовательский агент с помощью пакета mobile-detect и передав ожидаемые значения в изоморфный HOC, созданный поверх react-sizes, который позволяет настроить «прогнозируемые» размеры экрана для работы на стороне сервера.
2. Оберните свою условную логику соответствующими вашей бизнес-логике структурами с помощью созданного вами adaptive HOC
3. …
4. Прибыль

Будьте в курсе, по крайней мере, следующих случаев, о которых вам следует позаботиться:

1. Узкие экраны пользовательских агентов рабочего стола будут отображаться как на рабочем столе, но могут начать повторный рендеринг на стороне клиента, поскольку matchMedia будет выполнять свою работу на клиенте
2. Любой уровень кэширования должен включать проанализированный тип устройства в ключ кэша, чтобы вы не кэшировали потенциально поврежденный макет.

У меня было несколько мест с такими условиями. В конце я решил рендерить только условный компонент на стороне клиента как наименее проблемное решение с наименьшими накладными расходами.

Другие решения:

Если это компонент с важным SEO-контентом, и вам нужно его отрисовывать (сделайте так, чтобы он выглядел немного лучше, если он отрисован в неправильном размере, пока react не перенаправит компонент в зависимости от размера экрана). Имейте в виду, что этот подход может привести к некоторым ошибкам во время регидратации, поскольку react иногда дублирует div. Вы можете установить новый ключ для компонента, чтобы исправить это.

Вы также можете использовать css для скрытия содержимого.

Вы можете узнать, является ли устройство мобильным или нет, используя этот фрагмент кода в вашем server.js

 app.get('*', (req, res) => {
  var ua = req.header('user-agent');
  if (/mobile/i.test(ua)) {
    //mobile code
  } else {
    // desktop code
  }
});
  

и вы можете передать это логическое значение в react и использовать его