💡SSR vs CSR

주니어 개발자의 개인 공부 과정을 기록합니다.

SSR vs CSR

: 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)

서버 사이드 렌더링(SSR)

• Server Side Rendering
• 요청 시 마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식
• 즉, 새로고침 할 때 마다 문서 전체를 계속 서버에 요청, 렌더링 함

📍참고
렌더링: 어떠한 웹 페이지 접속 시 그 페이지를 화면에 그려주는 것

클라이언트 사이드 렌더링(CSR)

• Client Side Rendering
• 모바일 시대가 도래하면서 모바일 환경에 맞는 최적화된 서비스 필요
• 일반적인 컴퓨터에 비해 성능이 낮은 모바일에서 최적화시키기 위해 기존과 다른 방법이 필요 해졌고, 그래서 나온 개념이 SPA(Single Page Application) 이다

SPA

• 브라우저에 로드 되고 난 뒤에 페이지 전체를 서버에 요청하는 게 아닌,
• 최초 한 번 페이지 전체를 로딩한 후
• 변경된 부분, 렌더링이 필요만 부분만 서버에 요청하는 방식

  서버는 단지 JSON 파일만 보내주는 역할을 하며 HTML을 그리는 역할은 프론트엔드에서 자바스크립트가 수행한다 이러한 개념이 틀라이언트 사이드 렌더링이다

---

✨ tl;dr

SSR vs CSR

• SSR의 경우 초기 로딩속도가 빠르고 SEO에 유리하지만View 변경시 서버에 계속 요청을 해야 하므로 서버에 부담이 크다.
• CSR의 경우 초기 로딩속도는 느리지만초기 로딩 후에는 서버에 다시 요청할 필요없이 클라이언트 내에서 작업이 이루어지므로 매우 빠르다.