#reactjs #next.js #server-side-rendering
#reactjs #next.js #рендеринг на стороне сервера
Вопрос:
Я использую NextJS, и мне нужно получить ширину экрана на стороне сервера, потому что у меня есть случай, когда мне нужно отобразить один компонент на мобильных экранах, а другой — на экранах настольных компьютеров, но сервер отображает только настольную версию, потому что он не может проверить ширину экрана, но клиент может это сделать и отображает другой компонент на небольших экранах.экраны и я получаю предупреждение о том, что содержимое на стороне сервера и на стороне клиента не совпадало. Как избежать этого без использования устройства, но ширина экрана только на стороне сервера?
Ответ №1:
Лучшее решение — использовать css для управления вашим компонентом вместо JS.
Как вы уже упоминали, на вашем сервере нет объекта screen / window, поэтому он не будет определять ширину.
если я могу предложить, вам лучше использовать @media-screen и поставить класс показанного / скрытого компонента на определенное количество точек останова. Если вы используете css framework, вы также можете использовать их классы.
Комментарии:
1. Да, но мне нужно изменить некоторое логическое поведение в зависимости от ширины экрана, поэтому медиа-запросы css в этом случае не для меня: (
2. как вы уже знаете, обнаружение объекта window только на стороне клиента означает, что вы можете получить ширину экрана, когда ваше приложение отображается на стороне клиента.