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 를 혼합하여 프로젝트를 구성이 가능하여 인기가 있는게 아닌가 생각이 되네요