그룹스터디 [Browser : CSR(Client Side Rendering) vs SSR(Server Side Rendering)]

CSR vs SSR

CSR과 SSR은 브라우저에 HTML파일을 렌더링 시키는 방식 중 하나이며, 여러 차이가 있지만 그 중에서도 클라이언트(브라우저)에 페이지가 어느 시점에 구성되는지(렌더링)가 가장 큰 차이점이라고 할 수 있다.

 

CSR(Client Side Rendering)

CSR은 웹 페이지의 렌더링이 클라이언트 (브라우저) 측에서 일어나는 것입니다. CSR은 서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한번만 있기 때문에 페이지 이동이 빨라서 좋은 사용자 경험을 가질 수 있는 장점이 있지만, SEO(검색최적화) 사용이 어렵다는 것과 보안 관련해서는 쿠키에 사용자 정보를 저장해야 해서 위험 요소가 있습니다.

React가 SPA(Single Page Application)으로 CSR방식 사용

 

키워드

구성

1.  브라우저가 서버에 요청
2. 서버에서는 필요한 JS파일에 대한 링크만 있는 index.html파일을 클라이언트에 전송
3. 클라이언트는 링크되어 있는 JS파일을 서버로 부터 다운로드(해당 JS파일에 페이지를 구성하는데 필요한 소스코드들이 다 담겨있다.)
4. 기타 추가로 필요한 데이터가 있을 경우 서버에 요청하여 데이터를 받아온 후 동적으로 HTML파일을 생성
5. 페이지 구성

 - 즉 브라우저가 JS파일만 있는 html파일을 받아서 브라우저가  렌더링함

 

장점

• 좋은 사용자 경험
• 처음 페이지이외에 다음으로 페이지를 로딩하는 시간은 더 짧다.

단점

• 처음 페이지를 로딩하는데까지의 시간이 오래걸림
  • (파일에는 애플리케이션을 구성하는 소스코드가 다 들어있기 때문에 용량이 굉장히 클 수 있기 때문)
• SEO(Search Engine Optimization)검색최적화가 어려움
  • (구글이나 네이버의 검색 엔진들은 서버에 등록된 HTML파일들에 있는 정보(title, description 등)를 참고하여 동작)
• 쿠키에 사용자 정보를 저장해야 해서 보안에 취약

 

SSR(Server Side Rendering)

SSR은 첫 페이지의 렌더링을 클라이언트 측이 아닌 서버 측에서 처리해 주는 방식입니다. 이는 SEO 측면에서 유리합니다. 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 보여주는 방식이기 때문입니다. 하지만 View 변경이 될 때마다 계속적으로 서버에 요청을 해야 하기 때문에 서버 부담이 커진다는 단점이 있습니다. 보안 관련해서는 서버에서 세션으로 사용자의 정보를 저장할 수 있습니다.

Next.js의 특징 중 하나가 SSR

 

키워드

구성

1. 브라우저가 서버에 요청
2. 서버에서 미리 만들어둔 HTML파일을 클라이언트에 전송
3. 클라이언트는 받아온 HTML파일을 통해 페이지를 구성
4. 링크되어 있는 JS파일을 서버로부터 다운로드 
5. 추가로 필요한 데이터가 있을 경우 클라이언트가 서버에 요청, 서버에서는 위와 똑같이 데이터를 다 받아와 HTML을 잘 만들어 클라이언트에 전송

 - 즉 브라우저가 HTML파일을 받아서 렌더링을 먼저하고 후에 JS파일을 사용

 

장점

• 페이지의 로딩 속도가 빠름
• SEO(Search Engine Optimization)검색최적화에 좋음

단점

• 다음페이지 이동시 화면 깜빡임 이슈가 있을 수 있음
  
  • ( 다시 서버에 요청하고 받아와 리렌더링하기 때문)
• 사용자와의 인터렉션이 좋지 않을 수 있음
  
  • (먼저 잘 만들어진 HTML파일을 받아와 빠르게 화면을 구성하지만, 필요한 JS파일이 다 다운로드가 안되어있을 수도 있기 때문)
• 서버 부담이 커짐
  
  • (View 변경이 될 때마다 계속적으로 서버에 요청을 해야 하기 때문)

 

 

정리

CSR은 초기로딩속도가 느리긴하지만, 화면전환에 있어서 클라이언트에서 이루어져서 빠른 전환이 가능합니다.

SSR은 초기 로딩속도가 빨라서 사용자가 느끼기엔 좋지만, 동작은 하지 않습니다. 그리고 화면전환에 있어서 서버에 요청해야하므로 서버에 부담을 줄 수 있습니다

그래서 어떤게 더 좋다고 할 수는 없고 서비스마다 사용자의 요구에 맞게 각각의 방식을 활용할 수 있습니다.