CSR (Client Side Rendering)
- 클라이언트 브라우저에서 어플리케이션 렌더링 진행
- 서버는 요청을 받으면 클라이언트에 HTML과 JS를 보내주고 클라이언트는 그것을 받아 렌더링 시작
장점
- 서버에 부하가 적다 - 최초의 빈 HTML을 주는 것 외에 페이지 렌더링을 위해 별도의 HTTP통신이 필요 없다.
- 첫 페이지를 로딩한 후 사이트의 다른 곳으로 이동하는 동작에서 나머지 부분을 구성하는 코드를 받아왔기 때문에 빠르다.
단점
- SEO(Search Engine Optimization)이 취약하다 - 최초의 빈 HTML만 렌더링하기 때문에 크롤러들이 제대로 컨텐츠를 읽어들일 수 없음
- 첫 페이지 로딩이 느리다 - 빈 HTML을 받고 페이지 로드에 필요한 자바스크립트 코드, 라이브러리 등의 소스 코드를 모두 불러오기 때문
SSR (Serer side Rendering)
- 서버에서 뷰 구성에 필요한 전체 HTML을 요청을 받은 즉시 생성해서 변환
- 클라이언트 브라우저에서 응답을 받은 후, 이미 완성된 뷰를 그대로 보여진다.
장점
- 서버사이드에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응하기 용이
- 필요한 부분의 HTML과 스크립트만 불러오기 때문에 첫 페이지 로딩이 빠르다.
단점
- 첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동할 때 첫 페이지를 로딩한 과정을 정확히 다시 실행하기 때문에 더 비효율적
- 매번 서버에 요청을 하기 때문에 서버 자원을 더 많이 사용한다.
SSG (Static Site Generation)
- 서버에서 뷰 구성에 필요한 전체 HTML을 요청을 받은 즉시 생성해서 반환
- 클라이언트 브라우저에서 응답을 받은 후, 이미 완성된 뷰를 그대로 보여지게 됨
Jamstack
- Javascript, Api, Markup의 약자
- 서버를 사용하지 않고 정적인 페이지를 만들어 호스팅하는 방식
-> 첫 방문시에 로드속도가 빠르고 SEO까지 가져갈 수 있는 SSR, SSG방식
-> 페이지가 로드된 이후는 사용자 경험을 가져갈 수 있는 CSR방식 선택
-> 정보가 수시로 바뀌는 페이지 SSR
-> 안바뀐다면 SSG을 선택하는 것이 효율적
