Приветствую.
Есть одна секция в NEXT.JS приложении: на мобильных она должна быть каруселью, а на десктопах - гридом.
Сижу думаю, как лучше сделать: обоим элементам сделать свойство display, которое для карусели (max-width:600px) будет block, для карусели (min-width: 600px) будет none, для грида соответственно (max-width:600) none, (min-width:600) flex
Или через js получить ширину экрана (например, через те же media query либо innerWidth) и уже в зависимости от ширины экрана рендерить либо один элемент, либо другой.
В приложении использую css-in-js решение (mui). Компонент выглядит примерно так:
export const Section = () => {
// showCarousel будет true при ширине меньше 600px, false в противном случае
const showCarousel = useMediaQuery("(max-width: 600px)");
// Media-Query решение
return (
<Box>
{/* sx это media query для max-width: 600px, sm - для min-width: 600px */}
<Carousel sx={{ display: { sx: 'block', sm: 'none' } }} />
<Grid sx={{ display: { sx: 'none', sm: 'flex' } }} />
</Box>
)
// или так conditional rendering
return (
<Box>
{showCarousel ? (<Carousel />) : (<Grid />)}
</Box>
)
}
Вопрос: как лучше? Почему одно лучше другого и в каких случаях/показателях? Может пойти вабанк и использовать ОБА: и условный рендеринг и медиа запросы??
Я думаю, будет лучше через медиа запросы применять разные значения display, т.к. это буде дешевле чем рендерить условно один элемет или второй.
ИЛИ НЕТ? По идее же приложение в процессе пользования не так часто меняет ширину экрана и отрендерить один элемент это наверняка быстрее чем отрендерить два элемента
В общем, ДИСКАСС.
