CSR, SSR, SSG NextJS
CSR Client-Side Rendering, SSR (Server-Side Rendering), SSG (Static Site Generation)은 모두 웹 개발에서 사용되는 다양한 렌더링 방법입니다. 각각의 방법은 웹 페이지를 어떻게 구성하고 브라우저에 표시할지에 대한 접근 방식에 차이가 있습니다.
CSR (Client-Side Rendering)
CSR은 웹 페이지를 동적으로 생성하는 방법으로, 서버로부터 초기 HTML, CSS, JavaScript 파일을 받아와 웹 페이지를 그린 후에, 클라이언트에서 JavaScript를 사용하여 추가적인 데이터를 가져와서 화면을 갱신합니다. 이를 통해, 사용자에게 더욱 빠르게 웹 페이지를 보여줄 수 있습니다.
대표적으로 React, Vue, Angular 등의 SPA(Single Page Application)가 CSR 방식을 사용합니다.
CSR의 장점
- 클라이어트에서 처리하기 때문에 서버 부하가 적습니다.
- 초기 로딩속도가 끝난 뒤에는 페이지전환이 빨라 경험이 좋습니다.
CSR의 단점
- html이 클라이언트에게 있기 때문에 검색 엔진 최적화(SEO)에 취약합니다.
- 초기에 모든 html파일과 js파일을 로드하기때문에 초기 구동 속도가 느립니다.
SSR (Server-Side Rendering)
SSR은 서버에서 HTML파일을 렌더링하여, 완성된 HTML파일을 브라우저에 전송하는 방식입니다.
이 방식은 CSR과 달리, 초기 HTML파일을 서버에서 생성하기 때문에 검색 엔진 최적화에 용이합니다.
SSR의 장점
- 검색엔진 최적화(SEO)가 쉽습니다.
- 서버에서 미리 HTML을 그린다음 보내주기 때문에 초기 로딩속도가 빠릅니다.
- 서버에서 처리하기 때문에 클라이언트 측의 부하가 적습니다.
SSR의 단점
- 서버에서 HTML을 처리하기 때문에 서버 부하가 높을 수 있습니다.
- 클라이언트에서 HTML을 갖고있지 않아 라우팅시 새로 HTML을 받아 깜빡임현상으로 사용자
경험이 떨어질 수 있습니다.
단 널리 쓰이고 있는 프레임워크인 NextJS의 경우 미리 프리렌더링을 쉽게
구현하여 SSR임에도 SPA처럼 페이지가 깜빡하는 현상을 개선하여 사용자 경험을 좋게 사용 할 수 있습니다.
SSG (Static Site Generation)
SSG는 정적인 페이지를 생성하는 방식입니다. 서버에서 HTML파일을 미리 생성하여, 클라이언트에게 제공합니다.
이를 통해, 초기 로딩 속도가 매우 빠릅니다. SSG는 주로 블로그, 포트폴리오 등 처럼 정적인 페이지에서 많이 사용됩니다.
SSG의 장점
- 초기 로딩 속도가 빠릅니다.
- 서버 부하가 적습니다.
- 캐시를 이용하여 성능을 향상시킬 수 있습니다.
SSG의 단점
- 사용자와의 인터렉션이 적습니다.
- 동적으로 변하는 데이터를 다루기 어렵습니다.
- 서버에서 생성된 정적 파일을 배포해야 하기 때문에, 변경 사항이 있을 경우 일일이 업데이트를 해주어야합니다.
단 NextJS 에서 revalidate를 지원합니다. revalidate은 개발자가 설정한 주기에 따라 새롭게 갱신된 값과 현재 배포되어있는 HTML에 값이 다르다면 새롭게 다시 받아와 값을 갱신 할 수 있는 기능으로 개선할 수 있습니다.
CSR vs SSR vs SSG
각 렌더링 방식마다 장단점이 있으며, 적절한 상황에서 사용해야 합니다.
일반적으로 아래와 같은 기준으로 선택 할 수 있습니다.
- CSR: 사용자 경험이 중요하며, 검색 엔진 최적화가 필요하지 않은경우 ex) 관리자 페이지
- SSR: 검색 엔진 최적화가 필요하며, 초기 로딩 속도가 중요한 경우 ex) 쇼핑몰
- SSG: 초기 로딩 속도가 중요하며 정적인 데이터로 이루어지는 경우
위 경우가 절대적인 것은 아니며, 프로젝트의 성격이나 요구사항에 따라 선택할 수 있습니다.
NextJS는 CSR, SSR, SSG 를 혼합하여 프로젝트를 구성이 가능하여 인기가 있는게 아닌가 생각이 되네요