Next.js 15 - Как отображать отдельные настольные и мобильные компоненты с различными данными без двойного рендеринга/изв ⇐ Javascript

[Anonymous]

Я работаю над проектом, используя Next.js 15 с компонентами сервера. У меня есть страница, которая нуждается в двух очень разных версиях: одна для рабочего стола, а другая для мобильных устройств. Поскольку пользовательский интерфейс существенно отличается между ними, я создал два совершенно отдельных компонента - один для мобильных устройств и один для настольных компьютеров - каждый с собственным макетом и требованиями к данным.
Для обработки отзывчивости я условно показываю/скрываю эти компоненты, используя CS, основанные на точках разрыва (например, установление проблем: нет. />
Оба компонента всегда отображаются на сервере, даже если один из них
hidden.
< /li>
Это приводит к ненужным извлечениям данных, особенно с версией на рабочем стопе
Компоненты сервера, я не могу условно их отображать
на основе window.innerwidth или медиа -запросов со стороны клиента. < /p>
< /li>
< /ul>
Есть ли рекомендуемый рисунок в следующем. для обоих?


Подробнее здесь: https://stackoverflow.com/questions/796 ... -different