CSR vs SSR 비교
CSR과 SSR의 특징과 차이점
CSR(Client Side Rendering)
렌더링이 클라이언트 쪽에서 실행되는 것을 의미합니다.
서버가 요청을 받으면 클라이언트에 HTML과 JS파일을 보내줍니다.
그리고 클라이언트는 해당 파일을 받아 렌더링을 시작합니다.
- User가 Website에 요청을 보내고,
- CDN이 HTML과 JS파일로 접근할 수 있는 링크를 클라이언트로 보냅니다.
(CDN - 엔드 유저의 요청에 '물리적'으로 가까운 서버에서 요청에 응답하는 방식, AWS의 cloudflare와 비슷한 개념) - 클라이언트는 HTML과 JS를 다운로드 받고,
(이때는 로딩 중이기 때문에 유저는 아무것도 보이지 않습니다. - 클라이언트는 JS를 다운로드 받고,
- 다운로드가 완료된 JS가 실행이 되고, API를 호출해 데이터를 받아옵니다.
(유저는 placeholder를 보게 됩니다.) - 서버가 요청받은 API를 응답하고,
- API로 받아온 데이터를 placeholder에 넣어주고, 페이지가 상호작용이 가능해집니다.
즉, 서버에서 처리가 일어나지 않고 클라이언트에서 모두 처리하기 때문에 자바스크립트가 다운로드 되고 실행되기 전까지는 유저는 아무것도 볼 수 없습니다.
SSR(Server Side Rendering)
서버에서 렌더링을 처리한 후 클라이언트로 보내주는 방식입니다.
- User가 Website에 요청을 보내고,
- 서버는
렌더링이 가능한HTML 파일을 만듭니다. - 클라이언트가 전달받을 때, 서버에서 렌더링 준비가 되었기 때문에 HTML은 즉시 렌더링되지만, 조작은 불가능합니다.
(Javascript가 처리되기 전이기 때문) - 클라이언트가 JS를 다운받고,
- 유저는 페이지를 볼 수 있고, 클라이언트가 유저의 조작을 기억합니다.
- 브라우저가 JS 프레임워크를 실행하고,
- 기억하고 있는 사용자의 조작을 실행하고, 페이지를 상호작용 할 수 있습니다.
즉, 서버에서 이미 렌더링이 가능한 상태로 클라이언트에 전달해주기 때문에, 실제로는 JS가 다운로드되고 있지만 유저는 페이지를 볼 수 있습니다.
CSR과 SSR의 차이
1. 웹페이지 로딩 시간
페이지 로딩의 종류는 2가지로 볼 수 있는데,
하나는 사이트의 가장 첫 페이지(메인페이지)를 로딩하는 것과
다른 하나는 나머지(페이지 전체)를 로딩하는 것으로 나눌 수 있습니다.
첫 페이지 로딩 시간
- CSR은 HTML, CSS, 모든 JS파일을 한 번에 불러오기 때문에 속도가 느리고, SSR은 렌더링에 필요한 부분의 HTML과 JS를 불러오기 때문에 비교적 속도가 빠릅니다.
나머지 로딩 시간
- CSR은 전체를 받아오기 때문에 페이지 이동에서 빠르게 동작하는 반면, SSR은 해당 페이지만 받아오기 때문에 페이지 이동 시 같은 과정을 반복하게 됩니다. 따라서 CSR에 비해 SSR이 느리게 동작합니다.
2. SEO 대응
검색엔진은 자동화된 로봇인 크롤러로 웹 사이트를 읽는데, CSR은 자바스크립트를 실행시켜 동적으로 컨텐츠가 생성되고, 자바스크립트가 실행되어야 metadata가 바뀝니다.
하지만 SSR은 서버사이드에서 컴파일되어 클라이언트로 전달하기 때문에 크롤러에 대응하기 용이합니다.
3. 서버 자원 사용
SSR은 서버에서 렌더링을 처리하기 때문에 서버 자원을 더 많이 사용합니다.
사용 권장 예시
SSR을 사용할 때
-
네트워크가 느릴 때
(CSR은 한 번에 모든 것을 불러오지만, SSR은 각 페이지마다 나눠 불러오기 때문) -
SEO(serach engine optimization : 검색 엔진 최적화)가 필요할 때
-
최초 로딩이 빨라야하는 사이트를 개발 할 때
-
메인 스크립트가 크고 로딩이 매우 느릴 때
CSR은 메인스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다. 하지만 SSR은 한번의 요청에 아예 렌더가 가능한 페이지가 돌아온다.
-
웹 사이트가 상호작용이 비교적 적을 때
CSR을 사용할 때
- 네트워크가 빠를 때
- 서버의 성능이 좋지 않을 때
- 사용자에게 보여줘야 하는 데이터의 양이 많을 때
(로딩창을 띄울 수 있는 장점이 있다) - 메인 스크립트가 가벼울 때
- SEO 최적화가 필요하지 않을 때
- 웹 애플리케이션에 사용자와 상호작용할 것이 많을 때
(렌더링 되지 않아서 사용자의 행동을 막는 것이 유리할 때)
