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

안녕하세요.

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

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

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

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

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

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

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

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

이런 현상 없이

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

어떻게 하면 될까요?