[Reference] CSR / SSR

SSR(Server Side Rendering)

서버쪽에서 렌더링 준비를 끝마친 상태로 클라이언트에 전달하는 방식.

• User가 URL 요청을 보냄
• Server는 즉시 렌더링 가능한 html파일을 만든다.
• 클라이언트에 전달되는 순간, 이미 렌더링 준비가 되어있기 때문에 html은 즉시 렌더링
  • JS가 읽히기 전이라 사이트 자체는 조작 불가능
• 클라이언트가 JS를 다운받는다.
  • 다운 받아지고 있는 동안에 유저는 컨텐츠는 볼 수 있지만, 사이트를 조작할 수 없다.
  • 이때의 사용자 조작을 기억하고 있는다.
• 브라우저가 JS 프레임워크를 실행한다.
• JS까지 성공적으로 컴파일 되면, 기억하고 있던 사용자 조작이 실행되고, 웹 페이지는 상호작용이 가능해진다.

즉, 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되기 때문에, JS가 다운로드 되는 동안 사용자는 컨텐츠를 보고 있을 수 있다.

CSR(Client Side Rendering)

렌더링이 클라이언트쪽에서 일어나며, 서버는 요청을 받으면 클라이언트에 html과 JS를 보내준다.
클라이언트는 그것을 받아 렌더링을 시작한다.

• User가 URL 요청을 보냄
• CDN이 html 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보낸다.
• 클라이언트는 html과 JS를 다운받는다.
  • SSR과 달리 유저는 아무것도 볼 수 없다.
• 다운이 완료된 JS가 실행되고, 데이터를 위한 API가 호출된다.
  • 서버가 API 요청에 응답한다.
• API로부터 받아온 data를 placeholder 자리에 넣어주면 페이지는 상호작용이 가능해진다.

즉, 서버에서 처리 없이 클라이언트로 보내주기 때문에 JS가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없다.

차이점

웹 페이지를 로딩하는 시간

웹 페이지 로딩의 종류는 첫 페이지를 로딩하는 것과 나머지를 로딩하는 것으로 나눌 수 있다.

첫 페이지 로딩 시간

CSR의 경우 HTML, CSS와 모든 스크립트들을 한 번에 불러온다.
SSR은 필요한 부분의 HTML과 스크립트만 불러오게 되어 평균적으로 SSR이 더 빠르다.

나머지 로딩 시간

첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동한다고 하면, CSR은 이미 첫 페이지를 로딩할 때 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
반면, SSR은 첫 페이지를 로딩한 과정을 다시 실행하기 때문에 더 느리다.

SEO 대응

검색 엔진은 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는다.
CSR은 JS를 실행시켜 동적으로 컨텐츠가 생성되기 때문에 JS가 실행 되어야 metadata가 바뀌었다.
SSR은 애초에 서버 사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이하다.

SEO(Search Engine Optimization : 검색 엔진 최적화)는 검색 엔진으로부터 웹 사이트나 웹 페이지에 대한 웹 사이트 트래픽의 품질과 양을 개선하는 과정이다.

서버 자원 사용

SSR은 매번 서버에 요청하기 때문에, 서버 자원을 더 많이 사용한다.

사용 권장

• SSR 사용
  • 네트워크가 느릴 때
    • CSR은 한번에 모든 것을 불러오지만, SSR은 각 페이지마다 나눠 불러오기 때문
  • SEO(Search Engine Optimization : 검색 엔진 최적화)가 필요할 때
  • 최초 로딩이 빨라야하는 사이트를 개발 할 때
  • 메인 스크립트가 크고 로딩이 매우 느릴 때 CSR은 메인 스크립트가 로딩이 끝나면 API로 데이터 요청을 보낸다.
    • 하지만 SSR은 한번의 요청에 렌더가 가능한 페이지가 돌아온다.
  • 웹 사이트가 상호작용이 별로 없을 때
• CSR 사용
  • 네트워크가 빠를 때
  • 서버의 성능이 좋지 않을 때
  • 사용자에게 보여줘야 하는 데이터의 양이 많을 때
    • 로딩창을 띄울 수 있는 장점이 있다.
  • 메인 스크립트가 가벼울 때
  • SEO에 관심 없을 때
  • 웹 애플리케이션에 사용자와 상호작용할 것들이 많을 때
    • 렌더링 되지 않아서 사용자의 행동을 막는 것이 경험에 오히려 유리하다.