클라이언트 사이드 렌더링(CSR) / 서버 사이드 렌더링(SSR) / 정적 사이트 생성(SSG) 비교 및 장단점 정리

Client-Side Rendering(CSR)

클라이언트 사이드 렌더링이란 초기 웹사이트 접속시 서버로부터 모든 파일을 불러와 클라이언트에서 페이지를 렌더링한 후 사용자에게 보여주는 방식이다.

 

CSR는 React, Vue, Angular 와 같은 single-page aplication (SPA) 에서 주로 사용되는 렌더링 방식인데, 즉 하나의 index.html 파일에 자바스크립트로 각 페이지를 렌더링한다.

 

CSR 장점

1. 초기에 웹사이트를 렌더링 후에 페이지간의 이동이 빠르다.
2. 새로고침이나 화면 깜빡임 등과 같은 현상이 발생하지 않기 때문에 UX에 엄청난 이점을 준다.
3. 서버가 클라이언트 뷰(View) 단에서 처리할 일을 신경쓰지 않아도 된다.

CSR 단점

1. 유저는 번들링이 완료된 JS 파일을 모두 다운로드받기 전까지는 빈 화면만 볼 수 있다.
2. 초기에 반환되는 HTML 파일은 비어있기 때문에 SEO 성능이 좋지 않다.
3. html 파일이 하나이므로 각 페이지 마다 다른 meta tag를 적용할 수 없다.

 

Server-Side Rendering(SSR)

서버 사이드 렌더링은 클라이언트가 서버로 request를 보내면 서버에서 페이지를 렌더링해서 클라이언트로 보내는 방식이다.

 

SSR 장점

1. 첫 페이지 로딩 시간이 CSR 방식과 비교해 매우 짧다. (하지만 그림에서 보듯이 별도의 JS 파일 등을 다운받아 적용하기까지는 시간이 좀 더 소요되어 사용자의 인터랙션에 정상적인 반응을 보일때까지 기다리는 시간이 어느정도 발생할 수 있다)
2. 이미 렌더링 된 HTML 문서가 전달되므로 CSR 방식에 비해 SEO(Search Engine Optimazation)측면에서 더 우수하다.
3. 사용자 정보를 서버측 세션으로 관리하기 용이하므로 CSR 방식에 비해 보안이 우수하다.
4. 모든 페이지가 각각 렌더링되므로 페이지마다 다른 meta tag를 추가할 수 있다.

SSR 단점

1. 각 페이지 이동 시 매번 로딩시간 및 새로고침 현상이 발생하기 때문에 UI/UX 면에서 좋지않다.
2. 서버에서 렌더링이 이루어지기 때문에 사용자가 많아지면 서버의 부담이 커지고, 부하에 걸릴 위험이 있다.

 

Static-Site Generation(SSG)

정적 사이트 생성은 웹 빌드시 모든 파일을 정적 html로 생성하고 서버에 업로드한 후 클라이언트 request에 대해 정적 html 파일을 전송하는 방식이다.

 

클라이언트 측에서 JavaScript를 사용해 페이지를 동적으로 렌더링을 하는게 아니라, 서버에서 HTML 파일을 사전에 생성하여 클라이언트에게 전달한다.

 

이를 통해 동적인 콘텐츠와 정적인 콘텐츠를 효과적으로 조합하여 유연하고 성능이 우수한 웹 애플리케이션을 구축할 수 있다.

 

이 때 SSR과 다른 점은, SSG는 이미 HTML 파일이 생성되어 있으므로 별도의 렌더링하는 작업이 필요하지 않다는 것이다.

 

정적 사이트 생성기로는 Next.js, Gatsby, Jekyll 등이 있다.

 

SSG 장점

1. 이미 생성된 HTML 파일을 전송하기 때문에 속도가 매우 빠르다.
2. SEO(Search Engine Optimazation)측면에서 우수하다.

SSG 단점

1. 시간이 지날수록 데이터가 오래 될 수 있으며, 새로운 데이터로 업데이트 하기 위해서는 다시 빌드해서 서버에 업로드해야 한다.

 

정리 ✨

Next.js에서는 서버 사이드 렌더링(SSR)과 정적 생성(SSG)을 통해 페이지를 Pre-Rendering하여 웹 애플리케이션을 최적화할 수 있다.

• CSR : SEO에 크게 구애받지 않고 복잡한 UI를 가진 경우에 적합하다.
• SSR : 데이터가 자주 업데이트 및 변경되고 요청 객체에 접근해야 하는 경우에 적합하다.(SSR을 통해 항상 최신 데이터를 적용할 수 있다.)
• SSG : 데이터가 자주 업데이트 되지 않고 요청 객체에 접근하지 않아도 되는 경우 즉, 정적 컨텐츠가 많은 경우에 적합하다. (초기에 한 번 렌더링된 정적 파일을 재사용하며 성능과 로딩 시간을 개선할 수 있다.)