NEXTJS의 CSR / SSR / SSG

Next.js는 Vercel에서 개발한 인기있는 React 프레임워크로, 클라이언트 사이드 렌더링(Client-Side Rendering, CSR), 서버 사이드 렌더링(Server-Side Rendering, SSR), 정적 사이트 생성(Static Site Generation, SSG) 등 여러 렌더링 방식을 제공합니다.

1. 클라이언트 사이드 렌더링 (CSR)

   이 방식은 일반적으로 단일 페이지 어플리케이션(SPA)에서 사용되며, 모든 렌더링은 브라우저에서 처리됩니다. 이 방식의 주요 이점은 초기 로드 이후에 서버에 추가적인 요청을 보낼 필요가 없다는 것입니다. 즉, 사용자가 애플리케이션과 상호 작용할 때마다 페이지가 새로 고쳐지지 않고 필요한 부분만 업데이트됩니다. 다만, CSR의 경우 초기 페이지 로드 속도가 느릴 수 있으며, 검색 엔진 최적화(SEO)에 문제가 있을 수 있습니다.

2. 서버 사이드 렌더링 (SSR)

   SSR은 페이지 요청이 있을 때마다 서버에서 HTML을 생성하는 방식입니다. 이 방식은 초기 페이지 로드 속도와 SEO에 유리합니다. 그러나 각 페이지 요청마다 서버에서 렌더링을 수행해야 하므로 서버 부하가 클 수 있습니다. Next.js에서는 getServerSideProps 함수를 사용하여 SSR을 수행할 수 있습니다.

3. 정적 사이트 생성 (SSG)

   SSG는 빌드 시에 HTML을 생성하는 방식입니다. 모든 페이지가 미리 렌더링되므로 사용자 요청에 대한 응답 시간이 매우 빠르고, 서버 부하도 적습니다. 이 방식은 블로그 포스트, 제품 목록, 문서 등 내용이 자주 변경되지 않는 경우에 적합합니다. Next.js에서는 getStaticProps와 getStaticPaths 함수를 사용하여 SSG를 수행할 수 있습니다.

Next.js는 이 세 가지 렌더링 방식을 모두 지원하므로 개발자가 애플리케이션의 요구 사항에 따라 가장 적합한 방식을 선택할 수 있습니다. 또한, Next.js 9.3 버전부터는 "Incremental Static Regeneration(ISR)"이라는 기능을 추가하여, SSG된 페이지를 백그라운드에서 주기적으로 업데이트하는 것을 가능하게 했습니다. 이를 통해 SSG의 장점을 유지하면서 동적 컨텐츠를 더 효과적으로 관리할 수 있게 되었습니다.