Лучшая практика для условного рендеринга с SSR в Next.js

в моем приложении Next.js я хочу отобразить заголовок для мобильных / настольных компьютеров в зависимости от ширины устройства. В общем, это простая задача, я много раз делал это в обычном режиме, используя хуки, такие как useWindowDimensions, где я проверяю ширину объекта окна и использую этот параметр для простого условия. Однако в Next.js я столкнулся с проблемой, заключающейся в том, что мое приложение предварительно отрисовывается на сервере, поэтому, конечно, нет объекта окна, который я мог бы использовать для этого условия. Что я пробовал:

• динамический импорт компонента, это означает, что компонент не получил предварительную визуализацию на сервере, а только на клиенте. Это сработало бы, но я не использовал преимущества SSR, и по причинам SEO я хочу предварительно визуализировать «ключевые компоненты», такие как заголовок.
• Я просто выбрал условие для SSR, например, всегда отображать мобильный заголовок, а в CSR я просто визуализирую реальное состояние. Это решило бы мою проблему с рендерингом всегда «ключевых компонентов» на стороне сервера, так что SEO доволен, но я получаю уродливое предупреждение о несоответствии контента между сервером и клиентом, потому что когда я визуализирую приложение на настольном устройстве, мой первый рендер на стороне клиента, конечно, будет заголовок рабочего стола. Так что это тоже не кажется хорошим решением.
• Затем я попытался отобразить определенное условие, как и раньше, поэтому всегда отображайте мобильный заголовок на стороне сервера и клиента и используйте ловушку useEffect только на mount useEffect({...}, []) , которая затем проверяет реальное состояние и запускает повторный рендеринг с правильным условием. Это решит мою проблему с SEO, а также предупреждение о несоответствии некрасивого контента. НО я сталкиваюсь с заметным сдвигом макета, когда пользователь сначала видит мобильный заголовок, а через полсекунды заголовок меняется на заголовок рабочего стола. мерзость ..
• Итак, у меня возникла следующая идея: проверять пользовательский агент или тип устройства с помощью getServersideProps и каким-то образом использовать эту информацию для условного рендеринга на стороне сервера. На самом деле это не очень хорошо, особенно я хотел бы использовать его в моем _app.tsx, чтобы мне не приходилось писать этот материал для каждой страницы снова и снова. В обсуждении нить в официальном репозитории Next.js я обнаружил, что getServersideProps еще не работает в _app.js, только getInitialProps, который устарел и больше не должен использоваться ...

Короче говоря, должен быть хороший способ визуализации компонентов в Next.js без вышеупомянутых проблем. Я просто еще не мог понять, что лучше всего подходит для такого рода вещей.

Буду признателен за любые подсказки, подсказки или советы в этой теме ❤️