CSR, SSR 차이에 대해 설명해주세요.

내용 정리

• CSR과 SSR의 가장 큰 차이는 랜더링을 어디서 하느냐의 차이라고 볼 수 있습니다. CSR은 말 그대로 클라이언트에서 렌더링을 하기 때문에 비어 있는 HTML을 자바스크립트를 통해 그려주는 형식으로 작동합니다. 페이지를 오갈 때 전체 HTML을 받아오는 것이 아니라 일부 영역만 스크립트로 새로 그려주기 때문에 유저 친화적이고 사용자 경험에 유리하다고 볼 수 있습니다. 초기 랜더링을 제외하고는 속도 면에서도 유리합니다. 다만 최초에는 스크립트 전체를 가져오기 때문에 초기 랜더링 속도는 상대적으로 느리고, 말 그대로 빈 HTML에 스크립트로 엘리멘탈들을 그려주기 때문에 SEO에 취약하다는 단점이 있습니다.
• SSR은 반대로 서버에서 랜더링을 진행합니다. HTML과 CSS 등 모든 랜더링을 마친 후에 클라이언트로 전달해주기 때문에 SEO에 대응하기 좋고, 초기 랜더링 속도가 빠릅니다. 다만 페이지 이동 시 전체 HTML을 받아와야 하는 경우들이 있기 때문에 깜빡거림 등 사용자 경험에서 다소 불리할 수 있고, 상황에 따라 조금 다를 수 있지만 일부 서버에 추가 부하가 발생할 수 있다는 단점이 있습니다.
• 다만 최근에는 CSR도 Code Splitting이나 Tree-Shaking을 통해 초기 로딩 속도를 개선하거나 Pre-rendering를 통해 SEO에 대응하고 있기도 합니다.

꼬리 질문

• SEO에 대해 간략하게 설명해주실 수 있을까요?
  • 말 그대로 검색 엔진 최적화로 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 랭크 개선이라고 부르는데, 쉽게 말해 검색 결과 첫 페이지에 우리의 서비스가 나올 수 있게끔 만드는 과정이라고도 볼 수 있겠습니다. 일부 SEO 가이드라인은 제공하지만 대체로 대형 검색 엔진의 경우 검색 결과 랭킹을 영업 비밀로 취급하고 있습니다. 다만 큰 틀에서 생각해보면 시맨틱 마크업과 메타 태그가 가장 큰 영향을 미치고, LCP 같은 구글에서 측정하는 웹 퍼포먼스 지수 등이 영향을 끼치는 것으로 알려져 있습니다.
• CSR에서 SEO에 대응할 수는 없나요?
  • 최근에는 CSR도 Code Splitting이나 Tree-Shaking을 통해 초기 로딩 속도를 개선하거나 Pre-rendering를 통해 SEO에 대응하고 있기도 합니다.

참고자료

• https://adjh54.tistory.com/53
• https://developer.mozilla.org/ko/docs/Glossary/SEO
• https://minsoftk.tistory.com/68
• https://min88.tistory.com/entry/CSR-SSR-단점-보완-방법-정리해보기
• https://minoo.medium.com/next-js-처럼-server-side-rendering-구현하기-7608e82a0ab1
• https://byseop.netlify.app/csr-seo/

스터디 자료

• SEO를 개선해보신 경험이 있으신가요?
• 혹시 배포 후에 구글 검색 결과를 확인하고 SEO를 추가적으로 개선해본 적이 있으신가요?
• SSG에 대해서도 간략하게 알고 계신가요?