[WEB] SSR(Server Side Rendering) 과 CSR(Client Side Rendering)의 개념 및 차이

1. SSR (Server Side Rendering)

서버에서 렌더링 준비를 마친 상태로 클라이언트에 자원을 전달한다.

1-1. SSR 작동 방식

• 유저가 웹사이트 자원을 요청
• 서버에서 "렌더링 가능한" HTML 파일 생성 (리소스 체크, 컴파일 후 완성된 HTML 콘텐츠 생성)
• 브라우저는 즉시 HTML 렌더링, 사이트 조작 불가 상태
• 클라이언트가 자바스크립트를 다운받는다.
• 다운로드하여지고 있는 사이 콘텐츠는 볼 수 있지만 조작은 불가, 이 기간 동안 유저의 액션을 기억
• 브라우저가 자바스크립트 프레임워크를 실행
• 자바스크립트가 컴파일된 후 기억하고 있던 유저 액션을 실행시킨다.
• 서버에서 렌더링 가능한 상태로 이미 전달되기에 자바스크립트를 받는 동안 특정 자원을 볼 수 있다.

1-2. SSR 장점

• 초기 페이지의 로딩속도가 빠르다. 
• 서버에서 컴파일되어 클라이언트로 넘어오기에 클롤러 대응에 용이하여 SEO 친화적이다.
• 클라이언트 하드웨어 및 소프트웨어 성능에 영향을 덜 받는다.

1-3. SSR 선택 기준

• 네트워크가 느릴 때 (페이지마다 나눠서 불러오기 때문)
• 검색엔진 최적화가 필요할 때
• 최초 로딩이 빨라야 할 때
• 메인 스크립트가 크고 로딩이 느릴 때
• 웹사이트 상호작용이 별로 없을 때

2. CSR (Client Side Rendering)

렌더링이 클라이언트에서 일어난다. 서버에선 HTML과 JS를 보내고, 클라이언트에서 렌더링을 시작한다. 모든 로직, 데이터, 템플릿, 라우팅은 클라이언트에서 실행된다. 자바스크립트 번들 크기의 영향을 많이 받기에 코드 분할을 고려해야 하며, 적시 적소에 필요한 기능만을 제공해야 한다.

2-1. CSR 작동방식

• 유저가 웹사이트 자원을 요청
• CDN이 자바스크립트 링크가 포함된 HTML 파일을 바로 보낸다.
• 브라우저는 HTML을 다운로드하고 자바스크립트를 다운로드한다. 그동안 사이트는 유저에게 보이지 않는다.
• 자바스크립트가 실행된다. API로부터 받은 데이터를 위치에 넣어준다. 이제 페이지는 상호작용이 가능하다.
• 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스크립트, HTML이 모두 다운되고 실행되기 전에 유저가 볼 수 있는 내용은 없다.

2-2. CSR 장점

• 이미 모든 스크립트가 사전에 로딩되었기에, 후속 페이지 로드 시간이 빠르다.
• 서버를 호출할 때마다 전체 UI를 다시 로딩할 필요 없다.
• 클라이언트 자원을 사용하기에 서버 부하가 적다.

2-3. CSR 선택기준

• 네트워크가 빠르고, 서버 성능이 좋지 않을 때
• 사용자에게 보여줄 데이터가 많을 때 
• 메인 스크립트가 가벼울 때
• 웹 애플리케이션에 사용자와 상호작용할 것들이 많을 때

 

 

 

 

 

 

참고

https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg

https://off-dngw.github.io/posts/SSR-CSR/