클라이언트 컴포넌트는 SSG? SSR?

Question

이전 질문글에 답글을 남겼는데, 확인하기 힘드실 것 같아 질문을 새로 작성합니다. 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!

하조은 · Answer

확인을 위해 질문으로 달아주셨는데 제가 확인이 늦었습니다! 우선, 좋은 질문 남겨주셔서 감사합니다.   App Router에서 클라이언트 컴포넌트는 기본적으로 SSR 입니다. 공식 문서 에서 클라이언트 컴포넌트를 설명할 때 HTML을 내려주고 하이드레이션 단계를 수행한다고 설명하고 있습니다. 기존의 Page Router에서 사용하는 SSR, SSG는 페이지 단위의 렌더링입니다. App Router에서도 페이지 단위로 이를 결정할 수 있는 방법을 제공합니다. dynamic 옵션을 이용할 수 있습니다. 아래와 같이 주는 설정하는 방법인데 동적인 컴포넌트 생성이 있으면 에러를 반환하도록 만들어 정적인 페이지 생성을 가이드하는 옵션입니다. export const dynamic = 'error'   설정 자체가 그렇게 친절하지 않은 점으로 봤을 땐, App Router에서 권하는 방법이라고 보긴 어려울 것 같습니다. App Router부터는 컴포넌트 단위의 최적화를 권장하는 걸로 이해하면 좋겠네요. 이런 기조는 Next.js 블로그에서 확인하실 수 있습니다. ( 참고 )   985님께서 남겨주신 것과 유사한 질문이 Next.js 저장소에도 있어서 링크를 남겨두겠습니다. https://github.com/vercel/next.js/discussions/54114   다시 한 번, 좋은 질문 남겨주셔서 정말 감사합니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Next.js에서 클라이언트 컴포넌트는 서버에서 미리 렌더링된 마크업(HTML)을 제공하는 방식으로 구현될 수 있습니다. 이 방식은 SSG(Static Site Generation)와 SSR(Server-Side Rendering) 둘 다 포함하는데, Next.js에서는 다음과 같은 방식으로 선택하여 사용할 수 있습니다. SSG를 사용하려면, getStaticProps (정적 데이터를 위한 함수)를 사용하여 빌드 시점에 HTML을 생성할 수 있습니다. SSR을 사용하려면, getServerSideProps (동적 데이터를 위한 함수)를 사용하여 요청이 있을 때마다 서버에서 HTML을 생성하고 제공할 수 있습니다. Next.js는 개발자가 각각의 페이지와 컴포넌트에 대해 필요에 따라 SSG 또는 SSR 방식을 선택할 수 있도록 유연성을 제공합니다. Next12 버전에서도 이 두 가지 방식은 선택적으로 사용 가능한데, 필요에 따라서 페이지로딩 시 정적으로 생성될지, 아니면 서버에서 동적으로 렌더링될지 선택할 수 있습니다. 만약 Next.js의 공식 문서를 좀 더 자세히 살펴보고 싶으시면, Next.js 공식 문서( https://nextjs.org/docs)를 참고하시면 도움이 될 것입니다.