인프런 커뮤니티 질문&답변
작성한 질문수
사용자 편의성을 위해 쿼리스트링 사용 시 SSR
해결된 질문
24.10.03 11:09 작성
·
28
·
수정됨
0
안녕하세요. NextJS 14 App Router로 개발중인 프로젝트가 있습니다. 사용자 편의성을 위해 페이지네이션 관련 상태값이나 사용자가 검색한 값을 쿼리스트링에 저장하는 훅을 만들어서 훅 내부에서 상태값을 받아 URLSearchParams로 쿼리스트링을 세팅해서 router push를 하거나 usePathname이나 useSearchParmas를 사용해서 쿼리스트링 값을 읽어서 상태값으로 업데이트하고 데이터 페칭을 하고 있습니다.
메인 메뉴들 전반적으로 이 훅을 사용중이여서 페이지 컴포넌트에 'use client'를 입력해줘야 하는 상황인데, 그러면 제가 사용자 편의성을 위해 쿼리스트링에 값을 저장하는 방식 때문에 SSR을 사용할 수 없는 상황인지 궁금합니다.
그리고 이런 편의성을 제공하면서 SSR을 하려면 다른 방법이 있을까요?
답변 1
1
2024. 10. 03. 12:30
안녕하세요 이정환입니다.
자세한 사항은 제가 이응치읓님의 프로젝트를 들여다보지 못해 알 수 없지만...!
쿼리스트링을 Page Props로 받아 서버컴포넌트에서 처리하도록 만든 다음 쿼리스트링을 변경하는 일부 버튼만 클라이언트 컴포넌트로 구성하시면 됩니다.
더 쉽게 말씀드리자면 쿼리스트링을 수정해야 하는 최소한의 컴포넌트에만 'use client'를 선언해 클라이언트 컴포넌트로 만드시고, 다른 모든 컴포넌트에를 서버컴포넌트로 만드신 다음 페이지 컴포넌트에게 전달되는 Props로 부터 현재의 쿼리스트링을 꺼내 사용하시면 되겠습니다
이는 마치 우리가 서버액션을 구현할 때에 입력폼 하나만 똑 떼어서 클라이언트 컴포넌트로 만드는것과 유사합니다.
2024. 10. 03. 13:03
답변 감사합니다! Page 컴포넌트를 좀 더 쪼개서 말씀대로 수정해보겠습니다!