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


(name) #1

모바일과 데스크탑의 디자인이 달라
모바일용 컴포넌트, 데스크탑용 컴포넌트가 분리되어 있는 상황입니다.

서버에서 첫 랜더를 시도할 때 userAgent로만 판단하면
모바일 해상도로 접근하는 데스크탑일 경우 데스크탑용 컴포넌트가 랜더되고 있어서

didMount 단계에서 실제 해상도로 한번더 판단하는 로직을 추가했습니다.
그래서 깜빡?이는 현상이 생기게 되었는데요.

보통 SSR 단계에서 해상도에 따라 다른 컴포넌트를 사용하고 싶다면 어떤식으로 접근을 해야할까요?
SSR 단계에서 하는게 불가능하다면 CSR 단계에서 어떤식으로 처리를 해야 깜빡이는 현상 없이 가능할지 고민입니다.

미디어 쿼리로 처리하기에는 서로 다른 컴포넌트가 dom에 둘다 존재하고 있어서
이런 방법은 피해야하지 않을까 하는 생각이 들어 미디어 쿼리로 처리를 하지는 않았습니다.


(Tyler Shin) #2

완벽하진 않겠지만 http 요청의 user agent로 구분할 수 있습니다.