NextJS13 모바일 구분 및 기술 문의

Question

안녕하세요

nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다.

전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다.
(레이아웃을 웹, 앱 별도 구성 예정)

궁금한게 많아서 질문이 많이 있네요.
전문가분들 도움 부탁드립니다.

1. react-device-detect
모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. 
MobileView을 사용하여 ssr 사용은 불가능한건가요?

2. style-component
nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요?
추가로 style-component 를  use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요?

3. RCS(React Server Components)
children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다.

감사합니다.

김하림 · Accepted Answer

1번 답변 드리면, Next.js 미들웨어에서 데스크탑/모바일 여부를 판단하여 서로 다른 페이지(모바일 페이지, PC 페이지)로 rewrite 하는 방법이 있습니다. 아예 레이아웃이 다르다면 이 방법이 제일 베스트일 것으로 보입니다.

- Velog 글: https://velog.io/@uno8941/NextJS-Middleware#%EC%B4%88%EA%B8%B0-%ED%99%94%EB%A9%B4-%EB%A6%AC%EC%86%8C%EC%8A%A4-%EA%B0%9C%EC%84%A0-%EB%A7%81%ED%81%AC
- User Agent API 문서: https://nextjs.org/docs/app/api-reference/functions/userAgent

rewrite로 해결이 가능한 상황이 아니라면, 모바일 여부를 감지하는 대신 반응형 레이아웃 사용을 추천드립니다. 서버 컴포넌트/클라이언트 컴포넌트 상관없이 CSS로 분기 처리하면 모바일 분기 처리 로직 자체가 필요하지 않습니다.

반응형 레이아웃 사용이 어렵다면, 클라이언트 컴포넌트에서 분기 처리하는 방법이 최선일 것 같습니다. 먼저 앞서 말씀드린 두 방법을 사용한지 검토해보시고, 최후의 방법으로 클라이언트 컴포넌트에서의 분기 처리를 고려해보시면 좋을 것 같습니다.