SSR vs CSR

SSR(Server Side Rendering)

장점

• SEO(Search Engine Optimization)를 하기 위해서
  • 검색엔진 봇들은 HTML에서 데이터를 크롤링(수집) 하는데, CSR방식의 경우 클라이언트가 페이지를 구성하기 전까지는 HTML에 아무 데이터가 없음. 반면 SSR 방식은 서버 측에서 그려주는 방식이기 때문에 HTML 안에 컨텐츠가 포함된 상태 → 검색 엔진 최적화에 중요한 역할
• 요청하는 화면의 내용을 매 요청시 마다 받아오기 때문에 첫 로딩 속도가 빠름
• 리액트 라우터 사용 간략화

단점

• 유저와 상호작용에 따라 뷰가 변경될 때마다 서버와 응답하기 때문에, 서버에 부담이 가고 새로고침 때문에 UX측면에서도 불편함이 느껴질 수 있음

예시

Next.js

• React를 기반으로 한 framework
• SSR을 구현하고 SEO에 유리하기 때문에 사용
• 서버에서 받은 사용자의 접속 요청을 초기에 SSR 방식으로 렌더링 될 HTML을 보내고, 브라우저에서 JS를 다운로드를 하고 React를 실행하기 때문에 SEO가 가능
• 또한, 다른 페이지로 이동할 경우 CSR 방식으로 Server가 아닌 브라우저에서 처리함으로써 SPA 장점도 유지할 수 있음
• 빌드 시에 만든 모든 페이지들을 미리 렌더링하여 사용자에게 빠르게 보여줌(전형적인 SSR)
• 그 후 페이지에 필요한 최소한의 JS 코드를 불러와 페이지를 사용할 수 있게 해줌
• 또한 정적으로 사용하고있는 이미지에 대한 path를 따로 설정해 주지않아도 이미지 파일 이름만으로 바로 설정이 가능함

CSR(Client Side Rendering)

장점

• 트래픽 감소
  • 데이터 요청이 있을 때만 서버에 요청함 → 페이지 전환이 빠르고 서버에 부담이 적음
• UX
  • 새로고침이 발생하지 않아 유저가 네이티브 앱과 비슷한 경험을 할 수 있음

단점

• 처음에 모든 JS 파일을 다운받아 오기 때문에 첫 로딩 속도가 오래 걸림
• 맨 처음 HTML 파일이 비어있기 때문에 데이터를 수집할 수 없음
  • → 구글의 검색엔진은 JS 엔진이 내장되어 있기 때문에 상관이 없지만, 네이버와 다음의 경우 크롤링하지 못하기 때문에 SSR을 따로 구현해야 함