CSR, SSR

CSR과 SSR 기본 개념을 정리한 글

CSR, SSR

Client-side vs. Server-side vs. Pre-rendering for Web Apps | Toptal®

CSR과 SSR은 기본 지식으로 알아야 하는듯함 너무 많이 등장하는 단어인데 정확히 잘 몰라서 이번에 정리하고자 함.

CSR과 SSR은 화면 렌더링 처리가 발생하는 곳이 어디가 주체가 되느냐 인데, CSR은 클라이언트, SSR은 서버에서 처리한다.

렌더링

HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정

CSR

자바스크립트를 사용해서 화면을 렌더링하고, 화면 간의 이동을 하면서 렌더링할 때 경로마다 페이지를 새로 로드하는게 아니라 경로를 동적으로 생성할 수 있는 것을 말한다.

즉, 서버에서 최초 페이지 렌더링 후 사용자가 요청할 때마다 브라우저에서 렌더링하는 것이다.

CSR 네트워크 결과

SSR

서버사이드렌더링은 서버에서 사용자에게 보여줄 페이지를 미리 구성한 뒤에 페이지를 렌더링 하는 방식이라고 한다.

ssr 네트워크 결과를 가져오려고 했는데 적절한 이미지를 못찾음

ssr이 적용된 네트워크 결과에는 저런 script가 다 안나오고 서버 요청 결과만 나오는것으로 이해했음

그럼 언제 쓰면 될까?

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