Страница падает на сервере с ReferenceError: window is not defined
export default function ProductPage({ product }) {
const isMobile = window.innerWidth < 768;
return isMobile ? <MobileGallery /> : <DesktopGallery />;
}
В браузере при разработке всё работало, а при серверном рендеринге страница падает: ReferenceError: window is not defined. В чём причина?
- Компонент выполняется на сервере, где нет браузерных объектов вроде window
- window нужно импортировать из пакета react-dom
- window доступен только внутри обработчиков событий, даже в браузере
- Серверный рендеринг запрещает условный рендеринг компонентов