Next.js App router에서 SSR과 CSR 혼용이 가능한건가요?

Question

pages router를 써오다가 이번에 app router를 한번 써보려고 했는데.. 문제가 하나 있더라고요.getServerSideProps를 지원 종료하고 SSR 환경에서도 fetch를 그냥 본문 내에서 사용하게 해준건 좋은데,문제는 이러면 해당 컴포넌트에서 useState 등의 csr 메서드 사용이 막힌다는거고그렇다고 &#34;use client&#34;를 붙이면 SSR로 동작하길 원하던 내용까지 CSR로 전환되어 버리니..SSR로 불러온 데이터 버튼을 클릭했을때 useState를 변경시켜서 옆에 CSR로 표를 호출하는 등의 처리 작성이 안되는거같아요.https://stackoverflow.com/questions/76193533/server-side-rendering-with-dynamic-client-side-using-nextjs-app-router와 같이 SSR 컴포넌트를 작성하고 본문에 데이터를 넣어주는 방식도 시도해봤었는데, 그냥 CSR로 동작합니다.정보를 검색해봐도 useState 등을 사용하려면 &#34;use client&#34; 를 붙여야 한다고 하더군요. 이게 진짜로 안되는거면 쓰라고 만든게 아닌 수준이 아닌가 싶은데물론 앱 라우터에 대해 그런 악평은 없으니 방법이 당연히 있는데 제가 못찾고 있는것 같거든요...방법 아는분은 알려주시면 감사합니다...

컴포지트 · Accepted Answer

CSR 방식을 만족하려면, Next.js 프로젝트가 SSG 방식으로 배포가 가능해야 합니다.즉, 서버 자원을 사용한다 하여도, 이게 동적으로 바뀌는 조건이 성립되지 않도록 해야 합니다.이는 앱라우터나 기존 페이지 라우터나 동일한 조건입니다.페이지 라우터라도 getServerSideProps 쓰면 그 순간부터는 SSR 로 작동합니다.또한, SSR과 CSR은 각각 서버 컴포넌트와 클라이언트 검포넌트의 동의어가 아닙니다.동일하게 이해하면 당연히 개념 자체부터 다르기 때문에 혼란이 올 수밖에 없습니다.서버 컴포넌트와 클라이언트 컴포넌트의 개념 확립이 가장 우선되어야 합니다.다행히도 생활코딩에서 이를 다룬 수업이 있으니 주의깊게 보시길: https://opentutorials.org/course/5098

sjdowk · Answer

기존 프로젝트에서 app라우트로 전환은 결코 쉬운일이 아닙니다. 결국은 csr 부분을 자잘자잘하게 쪼개서 기존 프로젝트보다 atomic하게 만들 수 밖에 없더라구요. 프레임워크의 방향성이 이렇다면 따를 수 밖에 없을 것 같습니다. 화이팅입니다.

Next.js App router에서 SSR과 CSR 혼용이 가능한건가요?

2개의 답변

#next.js13 목록