RARRIT

기억을 너무 믿지 말자

:ledger: 서버사이드 랜더링(SSR)에 대해 알아보자.

클라이언트사이드 랜더링(Client-Side Rendering, CSR)을 공부 후 이번엔 서버사이드 랜더링에 대해 알아보자!!!

:one: 서버사이드 랜더링 (SSR)

서버사이드 랜더링(Server-Side Rendering, SSR)은 웹 페이지를 서버에서 랜더링해서 클라이언트(브라우저)로 보내는 방식이다. 전통적인 클라이언트사이드 랜더링과 달리 SSR에서는 서버가 HTML을 생성하고, 브라우저는 이 HTML을 바로 랜더링하여 사용자에게 표시한다.

:two: SSR의 장점과 단점

:pushpin: 2-1) 장점

  1. 빠른 초기 로딩 속도
    • 서버에서 완성된 HTML을 전송하므로 사용자가 페이지를 처음 볼 때 빠르게 로딩된다. CSR은 초기 로딩 시 JavaScript를 실행하여 클라이언트 측에서 페이지를 동적으로 구성해야해서 초기 로딩이 느린 반면 SSR은 사용자가 페이지를 요청하자마자 즉시 콘텐츠를 볼 수 있음
  2. SEO
    • 검색 엔진 크롤러는 서버에서 제공된 완전한 HTML을 쉽게 분석하고 인덱싱 할 수 있음. 이는 검색 결과에서 사이트의 가시성을 높이는 데 도움이 된다.
  3. 더 나은 상호작용성
    • 클라이언트에서 실행되는 JavaScript로 인해 복잡한 사용자 인터페이스와 동적 기능을 쉽게 구현할 수 있음. 예를들면, 사용자가 버튼을 클릭할 때 새로운 콘텐츠가 즉시 로드되거나, 애니메이션이 실행되는 등 상호작용이 가능함

:pushpin: 2-2) 단점

  1. 초기 로딩 시간
    • 브라우저가 처음 서버로부터 HTML,CSS,JavaScript를 모두 받아야하고 이후 JavaScript가 실행되어 콘텐츠를 랜더링하기 때문에 초기 로딩시간이 길어질 수 있음. 특히 네트워크 속도가 느리거나 사용자의 기기가 저사양인 경우 더 길어질 확률이 높음
  2. SEO
    • 많은 검색 엔진 크롤러는 JavaScript를 제대로 실행하지 못함. 즉, CSR을 사용하면 검색 엔진이 페이지의 실제 콘텐츠를 인덱싱하지 못해 SEO성능이 떨어질 수 있음.. 이를 해결하기 위해선 SSR(서버사이드 랜더링)을 사용하면 된다구함
  3. 상태관리
    • CSR에선 클라이언트 측에서 다양한 상태를 관리해야함, 상태란 UI,애플리케이션 데이터,폼 등 여러가지가 있는데 클라이언트 상태와 서버 상태를 동기화해야하고 여러 컴포넌트가 동시에 상태 변경이 되면 효율적으로 처리하기가 어려움이 있음. (최대한 이해해보려 하지만 어려움)
    • 내가 이해한 내용: 만약 쇼핑몰 사이트에서 내가 장바구니에서 무언갈 추가했을 때, DB에는 값이 담기지만 그 변경된 값이 나의 화면에서 업데이트가 되지 않는다면? 이런 상태관리로 이해중

:three: CSR의 실행 과정

다시 한번 정리해보면 CSR은 결국 클라이언트(브라우저)에서 처리한다는 것을 의미함. 대화 하는 느낌으로 한번 알아보자

:pushpin: 3-1) 로딩 과정

  1. 나(사용자) : url 들어가도 될까?
    • 웹사이트 URL 입력중..
  2. 브라우저 : 잠깐 ㄱㄷㄱㄷ, CDN에게 요청할게!
    • 서버에 요청함
  3. CDN(콘텐츠 전송 네트워크) : ㅎㅇ 여기 HTML,JavaScript파일들이 있음 이걸로 페이지를 시작해봐!
    • HTML,JavaScript 파일의 링크를 클라이언트에 전송함
  4. 브라우저 : 오우 땡큐! 다운로드할께!
    • CDN으로 전달받은 파일을 다운로드함
  5. 브라우저 : 사용자야 널 위해 HTML 파일을 열어볼께!
    • HTML 파일을 로드하며 이 파일에 최소한의 구조 및 스크립트 태그가 포함되어 있음
  6. 브라우저 : JavaScript 파일도 다운로드가 끝났어 이제 실행할께!
    • JavaScript 파일을 실행함
  7. JavaScript : 안녕 난 자스! 이제 서버한테 데이터를 가져와서 동적으로 페이지를 구성할께!
    • 서버에 데이터를 요청하고 받아옴
  8. 서버 : 요청하신 데이터를 대령하겠습니다!
    • JSON 형식으로 데이터를 클라이언트에 전송함
  9. JavaScript : 데이터 고마워! 이제 페이지 완성할께!
    • 데이터를 이용해 동적으로 HTML을 생성하고 페이지를 랜더링함
  10. 브라우저 : 오우 모든일이 완료되었군! 이제 완성된 페이지를 보여줄께!
    • 사용자에게 완성된 웹 페이지를 보여준다.
  11. 사용자 : 와.. 단지 url을 들어갔을 뿐 인대 너희 일처리가 멋찐걸?

:pushpin: 3-2) 페이지 상호작용

  1. 페이지 완성 : 3-1) 로딩 과정의 대화
  2. 사용자 : 오우 이제 뭐할까 장바구니에 상품을 추가해볼까?!
    • 장바구니 추가 버튼을 클릭함
  3. JavaScript : 상품이 추가되었어! 기다려봐 UI를 즉시 업데이트할께!
    • 장바구니 UI를 동적으로 업데이트함
  4. JavaScript : 좋아 이제 추가된 상품 정보를 서버에 전송해서 상태를 동기화해야지!
    • 서버에 장바구니 데이터를 전송함
  5. 서버 : 장바구니 정보 업데이트를 받았어요! 데이터베이스에 저장할께욧!
    • 장바구니 데이터를 저장함
  6. 브라우저 : ㅎㅎ 짜식들 열일하는구만! 모든 작업이 완료되었어요! 이 과정을 통해 페이지를 새로고침 하지 않고 최신 상태를 반영할 수 있답니다.
    • 사용자에게 최신 장바구니 상태를 보여줌
  7. 사용자 : 와.. 능력자들!!!

사실 공부하는데 너무 졸리기도 해서 대화하는식으로 작성해보니 재밌었다. 이 대화 형식은 결국 사용자, 브라우저,CDN, 서버, JavaScript간의 상호작용으로 이해하면 좋을 것 같다.

:fire: 마무리

CSR에 대해 공부해보았는데, 웹의 동작원리 중 한가지로 생각한다. 다시 한번 정리해보면 웹 애플리케이션에서 HTML콘텐츠를 서버에서 랜더링하지 않고, 브라우저에서 JavaScript를 통해 동적으로 생성하고 랜더링하는 것을 의미하며 이를통해 사용자 인터페이스가 빠르고 반응성 있게 동작하고 UI를 업데이트 해야할 경우 전체 페이지를 새로고침하지 않고 필요한 데이터만 갱신할 수 있다. 현재 우리가 유용하게 사용하고 있는 쇼핑몰 부터 시작해서 페이스북,인스타,트위터 등 다양하게 사용되는 것 같다.

:pushpin: 관련 글

참고