Условный рендеринг на стороне сервера - PullRequest
Новая
       52

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

1 голос
/ 28 марта 2019

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

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

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

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

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

Ответы [ 3 ]

1 голос
/ 29 марта 2019

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

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

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

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

1 голос
/ 29 марта 2019

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

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

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

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

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

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

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

...