next.js 를 사용하기 위해 준비하던 도중 next.js 는 ssr 이 가장 큰 장점이라고 했다.
그래서 next.js 프로젝트에 들어가기 앞서 ssr csr 의 차이와 장단점에 대해 간단하게 알아보고 기록하고자 한다.

CSR

CSR 의 과정

1. 브라우저가 서버에게 주소를 요청
2. 서버는 js 링크만 담긴 index.html 을 제공
3. index.html 은 빈 문서 !
4. 클라이언트는 html 에 포함된 js 링크를 이용해 서버에게 웹에 사용되는 모든 로직을 요청
5. 서버는 해당 요청을 통해 웹의 모든 로직이 담긴 js 파일을 클라이언트에게 제공하게 되고 이 때 화면이 출력된다.

CSR 의 특징

• 속도가 빠르다 (단, 초기화면 렌더링 시 제외)
• 필요한 요소만 부분 렌더링이 되어 서버 부화 감소
• 깜빡이는 현상이 없어 사용자 친화적이다.
• 화면 출력과 동시에 클릭이 가능하다.
  (TTV TTI 가 동시에 가능함)
  TTV : Time To View
  TTI : Time To Interact

SSR

SSR 의 과정

1. 브라우저가 서버에게 주소를 요청
2. 서버에서 만들어진 index.html 파일을 제공하며 이때 화면이 출력된다.
3. 아직 인터랙션이 동작하지 않고 서버에게 다시 js 파일을 요청
4. 서버가 js 파일을 제공해줌으로 인터랙션이 구비된다.

SSR 의 특징

• 화면이 출력된 시간과 인터랙션할 수 있는 시간의 텀이 길다.
• 서버 내에 만들어진 index.html 를 갖고 오기 때문에 SEO에 유리하다.
• 요청 (새로고침) 시 깜빡이는 현상
• 클릭 시 페이지 모든 요소가 리렌더링되어 서버에 부화를 초래