[프론트엔드] CSR VS SSR

CSR (Client Side Rendering)

CSR이란 렌더링이 클라이언트에서 일어나는 것을 뜻한다. 서버에 HTML과 JS 파일 요청을 보내면 서버가 파일들을 보내주고 클라이언트에는 파일들을 받아서 렌더링을 한다.

 

• 사용자의 행동에 따라 필요한 부분만 서버에 요청을 해서 렌더링 하기 때문에 빠른 인터렉션을 기대할 수 있다.
• 첫 페이지 로딩 시간이 길다. 서버에서 HTML 파일을 받지만 HTML 파일 내부에는 아무런 내용이 없다. React를 예로 들면, index.html 에는 <div id="root"></div>만 존재한다. 그래서 HTML 파일을 받고 JS 파일을 받은 후에 JS 파일을 실행하면서 렌더링이 된다. 그래서 필요한 파일을 모두 받은 후에 렌더링이 되기 때문에 초기 로딩 시간이 길다.
• 나머지 페이지를 로딩하는 시간은 빠르다. 왜냐하면 첫 페이지 로딩 시 모든 페이지를 받아왔기 때문이다.
• SEO (검색 엔진 최적화)가 좋지 않다. 웹 크롤러 봇이 웹 상에 존재하는 HTML 파일들을 분석해서 검색 엔진에 등록을 하게 되는데, HTML 파일에 정보가 없기 때문에 SEO가 좋지 않다. 구글에서는 이 문제를 해결하기 위해 JS 파일도 분석해서 검색 엔진에 등록을 하도록 구현을 했다.

SSR (Server Side Rendering)

SSR이란 렌더링이 서버에서 일어나는 것을 뜻한다. 서버에 요청이 들어오면 서버가 필요한 파일들을 모두 가져와서 HTML 파일을 만든다 (이렇게 만드는 과정을 렌더링이라고 한다). 만들어진 HTML 파일을 클라이언트에 보내주고 그다음 JS 파일을 보내준다.

 

• 서버에서 필요한 부분의 HTML 파일만 받아오기 때문에 첫 페이지 로딩 시간은 CSR보다 빠르다.
• 그러나 다른 페이지를 로딩할 때는 다시 서버로부터 요청을 받아야하기 때문에 나머지 페이지를 로딩하는 시간이 CSR보다 느리다.
• 모든 정보가 HTML 파일에 담겨져 있기 때문에 효율적인 SEO가 가능하다.
• HTML 파일을 먼저 읽어와서 클라이언트에 렌더링 하기 때문에 컨텐츠를 볼 수는 있지만 조작은 할 수 없다.  JS까지 모두 받은 후에야 조작이 가능해진다.
• 서버 과부하가 걸리기 쉽다. 사용자가 페이지 요청을 할 때마다 서버에서 필요한 데이터를 가지고 와서 HTML 파일을 매번 만들기 때문에 사용자가 많은 웹 서비스일수록 서버 과부하가 걸리기 쉽다.