Моя цель - представить компоненты с разной структурой для настольных ПК, планшетов и мобильных устройств.
Прежде всего, конечно, я реализовал адаптивный дизайн с использованием CSS и медиазапросов.
Однако в тех случаях мне нужна гибкость, чтобы иметь совершенно другой дизайн и функциональность, чтобы оптимизировать пользовательский интерфейс для настольной, планшетной или мобильной версии.Это означает, что структура html изменится, а содержимое может измениться.
Проблема с рендерингом на стороне сервера заключается в том, что я не знаю, какова ширина браузера клиента, чтобы определить, какое представление следует рендерить, МОЖЕТ быть пользователемна мониторе 1440p, но сделал ширину браузера меньше, чтобы соответствовать размеру мобильного телефона или планшета (или даже просто масштабировать / увеличить до 200%, например), поэтому, на мой взгляд, обнаружение на основе пользовательского агента со стороны сервера рискованно ..
Мне также нужно помнить, что я использую реагирующий гидрат для соответствия рендеру сервера.
Так что, исходя из всего этого, я не уверен, что делать дальше, возможно, кто-томогли бы помочь мне с этим?Вот моя идея с плюсами / минусами.
Что я собираюсь сделать, так это использовать componentDidMount (из-за гидрата) на этих компонентах, которые требуют разной структуры мобильного телефона / планшета, и загрузить необходимый компонент после монтирования,в зависимости от ширины браузера клиента.Это будет работать так: настольная версия всегда отображается по умолчанию клиентом и сервером, но когда медиа-запрос опускается ниже ширины планшета или мобильного устройства, он выводит css display: none и ждет, пока componentDidMount выполнит логику для отображения представления,и отображать соответствующий компонент ...
Теперь, конечно, существует проблема, что, когда первый рендеринг является мобильным, он не будет отображать какой-то конкретный раздел рендеринга на стороне сервера (из-за отображения: нет или какой-тозатемненный фоновый блок) и только после componentDidMount.
Другая проблема заключается в том, что если Google сканирует страницу в мобильном режиме или что-то в этом роде, контент после загрузки клиентского скрипта будет другим (с рабочего стола на мобильный).Может ли это повлиять на рейтинг страниц?
Итак, исходя из всего этого, вы бы посчитали это плохой практикой / подходом?Есть предложения или идеи?Буду очень признателен за любые комментарии по этому поводу.