SSR vs CSR

Wednesday. September 11, 2024 - 1 min

SSR

SSR은 Server Side Rendering의 약자로, 화면의 렌더링이 서버에서 이루어지는 아키텍처를 의미합니다. 사전적인 의미는 이러하지만 일반적으로 현대의 SSR은 “첫 HTML 렌더링을 서버에서 처리하고, 이후의 렌더링 사이클은 클라이언트에서 처리”하는 하이브리드 형태의 SSR.

HTML과 CSS 등 모든 랜더링을 마친 후에 클라이언트로 전달해주기 때문에 SEO에 대응하기 좋고, 초기 랜더링 속도가 빠릅니다. 다만 페이지 이동 시 전체 HTML을 받아와야 하는 경우들이 있기 때문에 깜빡거림 등 사용자 경험에서 다소 불리할 수 있고, 상황에 따라 조금 다를 수 있지만 일부 서버에 추가 부하가 발생할 수 있다는 단점이 있습니다.

CSR

CSR은 말 그대로 클라이언트에서 렌더링을 하기 때문에 비어 있는 HTML을 자바스크립트를 통해 그려주는 형식으로 작동합니다. 페이지를 오갈 때 전체 HTML을 받아오는 것이 아니라 일부 영역만 스크립트로 새로 그려주기 때문에 유저 친화적이고 사용자 경험에 유리하다고 볼 수 있습니다. 초기 랜더링을 제외하고는 속도 면에서도 유리합니다. 다만 최초에는 스크립트 전체를 가져오기 때문에 초기 랜더링 속도는 상대적으로 느리고, 말 그대로 빈 HTML에 스크립트로 엘리멘탈들을 그려주기 때문에 SEO에 취약하다는 단점이 있습니다.

image (1)

SEO에 대해 간략하게 설명해주실 수 있을까요?

말 그대로 검색 엔진 최적화로 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고 부르는데, 쉽게 말해 검색 결과 첫 페이지에 우리의 서비스가 나올 수 있게끔 만드는 과정이라고도 볼 수 있겠습니다. 일부 SEO 가이드라인은 제공하지만 대체로 대형 검색 엔진의 경우 검색 결과 랭킹을 영업 비밀로 취급하고 있습니다. 다만 큰 틀에서 생각해보면 시맨틱 마크업과 메타 태그가 가장 큰 영향을 미치고, LCP 같은 구글에서 측정하는 웹 퍼포먼스 지수 등이 영향을 끼치는 것으로 알려져 있습니다.

CSR에서 SEO에 대응할 수는 없나요?

최근에는 CSR도 Code Splitting이나 Tree-Shaking을 통해 초기 로딩 속도를 개선하거나 Pre-rendering를 통해 SEO에 대응하고 있기도 합니다.