react에서 SSR을 사용시 해상도에 따라 서로 다른 컴포넌트를 랜더링하려면 어떻게 해야할까요?

Question

안녕하세요.

리엑트로 반응형웹을 만들고 있습니다.

현재 모습은 모바일용 컴포넌트와 데스크탑용 컴포넌트가 분리되어 있는 상황입니다.

지금은 서버에서 요청을 받았을 때 user-agent를 기준으로 모바일인지 아닌지를 구분하여

첫 SSR시에 사용하고 CSR시에 didMount 단계에서 실제 해상도를 이용해 다시 한번 모바일인지 데스크탑인지 판단하여 재 랜더링을 하고 있습니다.

이렇게 했을때 문제는 user-agent가 데스크탑인 상태로 모바일용 해상도로 접근했을 때입니다.

SSR시에는 데스크탑으로 판단하여 데스크탑으로 랜더가 되었는데

CSR시에는 모바일로 판단하여 모바일로 리랜더를 하게 되어서

화면이 서로 다른 모양으로 깜박이는 현상이 발생합니다.

이런 현상 없이

SSR을 사용시에도 화면 크기에 따라 올바른 컴포넌트를 랜더링하고 싶은데

어떻게 하면 될까요?

Answer 1

서버 사이드에서 요청이 들어오면 userAgent를 redux에 저장하시고 서버 사이드 단계에서 어떤 컴포넌트를 렌더링할지 결정하시면 되지 않을까요?

didMount에서 다시 확인해야하기 때문에 dom이 감빡거리는거죠.

클라이언트 단계에서 진행하고 싶으시다면 userAgent체크 후 m.example.com으로 이동하시겠습니까? 라는 팝업을 띄우는것도 방법이겠네요.

또 다른 방법은 css 미디어 쿼리를 사용하면 체크하는 과정 자체가 불필요해집니다.