CSR (Client-Side Rendering)
- 영문 뜻 그대로
클라이언트 측에서 발생하는 렌더링을 뜻하며
즉 서버는 요청을 받으면 클라이언에게HTML과JS를 보내주고
클라이언트는 그것을 받아 렌더링을 시작합니다.
- 서버에서 처리 없이 클라이언트로 보내주기 때문에 JS가 모두 다운로드 되고
실행이 종료되기 전까지 사용자는 아무것도 볼 수 없습니다.
- 아래의 첨부된 사진은
CSR의 단계에 대한 설명입니다.
- 사용자가 웹 사이트에 요청을 보냅니다.
CDN이 HTML 파일과 JS로 접근할수 있는 링크를 사용자에게 보냅니다.
CDN(Content Delivery Network): 전 세계 여러 서버에 웹 콘텐츠를
분산 저장하여 빠르고 안정적으로 제공하는 네트워크
- 클라이언트는
HTML과JS를 다운로드 받습니다.
- 브라우저는
JS를 다운로드 받습니다.
- 다운로드가 완료된
JS가 실행되고 데이터를 위한API가 호출 됩니다.
- 서버가
API로 부터의 요청에 응답합니다.
API에서 받아온 데이터를placeholder자리에 넣어주고
이제 페이지는 상호작용이 가능해집니다.
'CSR'의 장점 및 단점
- 브라우저가
JS파일을 다운로드하고 동적으로DOM을 생성하는 시간을 대기해야
하기 때문에초기 로딩 속도가 느린 것이 단점이지만 반대로 초기 로딩 이후에는
페이지 일부를 변경할 때 서버에서 해당 데이터만 요청하면 되기 때문에 해당 과정
다음의 구동 속도는 빠르다는 특징이 있습니다.
서버는 빈 뼈대만 있는 HTML을 넘겨주는 역할만 수행하면 되기 때문에 서버 측의
부하가 적은데 이 뿐만 아니라클라이언트 측에서 연산, 라우팅 등을 모두 직접 처리하기 때문에 반응속도가 빠르고UX가 우수하다는 장점이 있습니다.
- 브라우저들이 가지는 웹 크롤러는 HTML을 읽어 검색 가능한 색인을 만들어 내는데
웹 크롤러 봇 입장에서는 HTML 문서가 텅 빈 것 처럼 보여서 색인할민한 콘텐츠가
존재하지 않기에SEO(검색엔진 최적화)에 불리하다는 단점이 있습니다.
- 열심히 서비스를 만들었는데 사용자가 검색을하는 사이트에서 노출이 잘 되지 않는
슬픈 일이 발생할 수도 있기 때문에SSR(Server Side Rendering)을 권장합니다.
SSR (Server-Side Rendering)
서버 측에서 렌더링 준비를 완료한 상태로 클라이언트에 전달하는 방식입니다.
- 서버에서 이미 렌더링 가능한 상태로 클라이언트에게 전달되기 때문에
JS가 다운로드 되는 동안 사용자는 무언가를 보고 있을 수 있습니다.
- 아래 사진은
SSR의 단계에 대한 설명입니다.
- 사용자가 웹 사이트에 요청을 보냅니다.
- 서버는
Ready to Render즉시 렌더링 가능한 HTML 파일을 만듭니다.
(리소스 체크 및 컴파일 후 완성됀 HTML 컨텐츠로 만듭니다.)
- 클라이언트에 전달되는 순간 이미 렌더링 준비가 되어있기 때문에 HTML은 즉시
렌더링되나 사이트 자체를 조작하는 것은 불가능합니다.(JS가 읽히기 전 상태)
- 클라이언트가
JS를 다운로드 받습니다.
- 다운 중인 사이 사용자는 컨텐츠를 볼 수는 있지만 사이트 조작은 불가능하며
이때 브라우저의 캐시는 사용자의 조작을 기억하고 있습니다.
- 브라우저가
JS 프레임워크를 실행합니다.
(프레임워크란 미리 정의된 구조와 규칙을 제공하는 플랫폼)
JS까지 성공적으로 컴파일 되었기 때문에5번 문항에서브라우저 캐시가 기억하고 있던 사용자의 조작이 실행되고 웹 페이지는 상호작용이 가능해집니다.
'SSR'의 장점 및 단점
SSR은 모든 데이터가 이미HTML에 담긴 채로 브라우저에 전달되기 때문에
SEO에 유리하고 그 이유는 웹 크롤러 봇이 HTML 문서를 무리 없이 읽을 수 있기
때문엡니다. 더불어JS를 다운로드 받고 실행하기 전에 사용자가 이미HTML이
렌더링 된 화면을 볼 수 있기 때문에JS의 다운로드를 기다려야 했던CSR보다
초기 구동 속도가 빠를 수 밖에 없습니다.
- 위의 시점에서는 사용자가 버튼을 클릭하거나 이동하려고 할 때 아무런 반응이
없을 수 있고 그 이유는 마치interaction가능한 페이지처럼 보이지만 실제로는
내용과 스타일이 입혀진 텅 빈 껍데기에 불과하기 때문에 실제로 클라이언트 측
JS가 실행되고 이벤트 핸들러가 첨부된JS 로직이 모두 연결될 때까지
사용자의 입력에 응답할 수 없습니다.
CSR vs SSR 둘 중 승자는?
결론을 먼저 말하자면 프로젝트의 요구사항과 우선순위에 따라 다를 수 있습니다. `CSR`은 사용자 경험(UX)과 페이지 인터랙티브 요소가 중요할 경우 유리하고 `SSR`은 검색 엔진 최적화(SEO)와 초기 페이지 로딩 속도가 중요한 경우 적합합니다.
1. 웹 페이지를 로딩하는 시간
웹 페이지 로딩의 종류는 두 가지로 나눌 수 있는데 하나는 웹 사이트의 가장 첫
페이지를 로딩하는 것과 다른 하나는 나머지 페이지들을 로딩하는 것 입니다.
첫 페이지 로딩 시간
CSR의 경우HTML,CSS와 모든 스크립트들을 한 번에 불러옵니다.
SSR은 필요한 부분의HTML과 스크립트만 불러오게 됩니다.
(따라서 평균적으로 렌더링 속도는SSR이 더 빠릅니다.)
나머지 페이지 로딩 시간
첫 페이지를 로딩한 후 사이트의 다른 곳으로 이동하는 방식의 동작을 가정합니다.
CSR은 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를
받아왔기 때문에 속도가 빠릅니다.
SSR은 첫 페이지를 로딩한 과정을 동일하게 다시 실행해서 더 느립니다.2. SEO 대응
- 검색 엔진은 자동회된 로봇인
크롤러를 사용해 웹 사이트들을 읽어오는데
CSR은JS를 실행시켜 동적으로 컨텐츠가 생성되기 때문에JS가 실행 되어야
메타 데이터가 바뀝니다.
SSR의 경우 애초에 서버 측에서 컴파일되고 클라이언트로 넘어오기 때문에
크롤러가 페이지의 내용을 쉽게 읽어올 수 있어서SEO에 유리합니다.
3. 서버 자원 사용
SSR이 서버 자원을 더 많이 사용하는데 그 이유는
매번 서버에 데이터를 요청하기 때문입니다.
CSR의 경우 클라이언트에게 작업을 몰아주기 때문에 서버에 부하가 적습니다.
글 작성 시 참고한 자료들의 링크입니다. 😊😁
컴공 편입 폴붕이의 일상