CSR & SSR

CSR & SSR

렌더링

개념

• html을 표준입출력장치(모니터 등)로 출력

검색 엔진 최적화

검색 크롤러

• 웹 크롤러 봇은 웹 상의 페이지를 돌아다닌다가 그 페이지가 어떤 페이지인지에 대한 정보를 추출하고

크롤링

• 웹사이트에 접근하여 데이터를 얻는 과정

검색 엔진 최적화

• 검색 엔진에서 사이트를 찾기 쉽도록 최적화하는 작업

SSR

개념

• Server Side Rendering
• 서버 측에서 렌더링이 발생
• 요청할 때마다 새로고침을 통해 페이지를 로딩할 때마다 서버로부터 리소스를 받아 완성된 html을 받아서 화면에 렌더링

장점

• 검색 엔진 최적화
  • 검색 엔진이 페이지를 크롤링하기 적합
  • 대부분의 웹 크롤러들은 자바스크립트를 실행하지 못하기 때문에 html에서만 정보 수집
  • 자바스크립트를 통해 html을 구성하는 CSR 방식보다 서버에서 렌더링 하여 html에 정보를 포함하고 있는 SSR 방식이 검색 엔진 최적화에 더 적합
• 초기로딩 성능 개선
  • 첫 렌더링 HTML을 클라이언트에게 전달하여 초기 로딩 속도가 빠르다.

단점

• 프로젝트 복잡도
  • 라우터를 많이 사요하면 복잡도 상승
• 성능 악화
  • 렌더링을 서버 측에서 하면 서버 자원을 많이 소모해 불필요한 트래픽이 낭비

CSR

개념

• Client Side Rendering
• 클라이언트 측에서 렌더링 발생
• 비어있는 html을 데이터를 서버로부터 요청하여 렌더링 진행
• 사용자의 행동에 따라 필요한 부분만 다시 읽어온다.
• 서버는 JSON 파일만 보내고 자바스크립트를 통해 HTML을 구성

장점

• 트래픽 감소
  • 필요한 데이터만 서버로부터 받아서 페이지를 구성하여 트래픽이 적다.
• 사용자 경험
  • 새로고침이 발생하지 않는다.

SPA

개념

• Single Page Application
• 첫 페이지만 서버로부터 SSR 방식으로 가져오고 이후 데이터 수정, 삭제, 조회할 때 동적으로 페이지를 구성하여 새로고침되지 않고 다른 페이지로 넘어가지 않는다.
• 첫 페이지만 SSR 방식으로 가져오고 이후에는 CSR 방식으로 동적으로 페이지 구성

MPA

개념

• Multi Page Application
• 서버로부터 완전한 페이지를 가져오고 이후 데이터를 수정, 삭제, 조회할 때 다른 페이지로 이동
• 주로 SSR 방식으로 서버에서 렌더링 된 정적 리소스를 다운로드하여 페이지를 이동한다.

Reference

https://velog.io/@ksh4820/SPA-CSR과-SSR-SEO

https://gyoogle.dev/blog/web-knowledge/CSR%20&%20SSR.html