Как сделать SSR для отзывчивых приложений, не зная заранее размер экрана устройства? - PullRequest
Новая
       46

Как сделать SSR для отзывчивых приложений, не зная заранее размер экрана устройства?

1 голос
/ 08 мая 2020

Я хочу использовать SSR для моего приложения для моих пользователей.

Но в моем коде приложения используется useEffect для определения ширины экрана пользователя, и только после этого приложение отображается.

Примерно так:

Приложение. js

  // THE LAYOUT INITIAL STATE IS NULL

  useEffect(() => {
    // CHECK FOR window.innerWidth AND DECIDE LAYOUT
    // UPDATE LAYOUT STATE
  });

  return(
    layout && <AppComponents>   // IF THERE IS NO LAYOUT, NOTHING IS RENDERED
  );

Компонент. js

 // I SERVE THE LAYOUT THROUGH CONTEXT AND I ACCESS IT INSIDE OF THE COMPONENTS

 const layout = useLayout();

 return(
   layout === "MOBILE" ? ComponentMobile : ComponentDesktop
 );

ВОПРОС

Я не могу полагаться на код внутри useEffect для рендеринга материалов на сервере. Итак, каким-то образом мне нужно «решить», какой макет использовать для первого и единственного рендеринга на сервере.

Итак, мои варианты, по крайней мере те, которые я думал до сих пор, следующие:

ВАРИАНТ # 1

Попробуйте угадать размер экрана устройства пользователя и отрендерить что-то, что может быть неоптимальным для его размера экрана.

Потому что прямо сейчас стили CSS, которые я визуализирую, зависят от размера экрана пользователя.

ВАРИАНТ № 2

Полностью перейти к медиа-запросам к обрабатывать отзывчивость, поэтому CSS всегда будет одним и тем же и будет автоматически адаптироваться к любому используемому размеру экрана.

До сих пор я вообще не использовал медиа-запросы. Все мои решения по макету принимаются во время рендеринга, и все компоненты рендерит стили на основе макета, который был выбран из App. js state.

Что такое лучший способ справиться с этим? Есть ли лучший способ для этого?

ПРИМЕЧАНИЕ:

Я использую styled-components, поэтому в основном я делаю следующее:

Это это грубый пример, но идея в этом заключается. 


// THIS IS MUCH EASIER TO WRITE THAN A BUNCH OF MEDIA QUERIES (IMO)

const Styled_DIV = styled.div`
  font-size: ${props => 
    props.layout === "MOBILE" ? "16px" 
    : props.layout === "TABLET" ? "18px" 
    : "20px"
  };
`;
...