Условный рендеринг на стороне сервера

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

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

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

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

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

Источник

3 ответа

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

  1. На стороне сервера вы можете прогнозировать тип устройства, анализируя user-agent с помощью пакета mobile-Detect и передавая ожидаемые значения в изоморфный HOC, созданный поверх активных размеров, что позволяет настроить "прогнозируемые" размеры экрана для работы на стороне сервера.
  2. Оберните вашу условную логику в соответствующие структуры бизнес-логики с помощью адаптивного HOC, который вы создали
  3. ...
  4. прибыль

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

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

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

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

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

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

Источник

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

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

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

Источник
Другие вопросы по тегам