프로젝트를 시작하려고 할 때 늘 vite와 next.js 중 뭘로 개발할지 고민했는데, 그 때마다 next.js의 SSR이 굳이 필요할까? SSR은 언제 필요하지? 라는 질문을 반복하게 되어 확실히 짚고 넘어가고 싶었다.
의문이 들 때마다 찾아봤는데 딱히 와닿지 않았는데, 해당 블로그의 글이 가장 이해가 잘 됐다.
읽는 것만으로는 또 잊을 것 같아서 아래에 내가 이해하기 쉬운 말로 정리해봤다.
CSR(Client Side Rendering)
- 렌더링이 클라이언트쪽에서 일어남
- 서버에서 처리 없이 클라이언트로 보내주기 때문에 js가 모두 다운로드되고 실행이 끝나기 전까지 사용자는 아무것도 볼 수 없음
순서
- user가 website 요청을 보냄
- 요청을 받고 서버가 클라이언트에 html과 js를 전송
- 클라이언트가 html과 js를 다운로드받음 (이 때 ssr과 달리 js를 모두 다운받아 실행하기 전까지 렌더링되지 않아 user는 아무것도 볼 수 없음)
- 다운이 완료된 js가 실행됨
-- 이후 상세 과정이 더 있는 것 같지만 핵심은 js가 실행되어야만 렌더링이 이루어지는 것이 가장 큰 차이인 듯 하다.
SSR(Server Side Rendering)
- 서버쪽에서 렌더링 준비를 마친 상태로 클라이언트에 전달
순서
- user가 website 요청
- 서버는 즉시 렌더링 가능한 html파일을 생성
- 클라이언트에 전달, 이미 렌더링 준비가 되어있어 html이 즉시 렌더링 (csr과 달리 user는 컨텐츠를 볼 수 있으나 js가 다운로드되기 전이므로 상호작용은 불가능)
- 클라이언트가 js를 다운로드
- 다운받는동안 유저가 사이트 조작 시 상호작용은 불가하나 사용자의 조작을 기억해둠
- 브라우저가 js프레임워크를 실행
- 기억하고있던 사용자의 조작이 실행되고 웹 페이지가 상호작용 가능해짐
-- 서버에서 이미 렌더 가능한 상태로 클라이언트에 전달되므로 js가 다운로드되는동안 사용자는 컨텐츠를 볼 수 있음
이외의 차이점들
1. 웹페이지 로딩 시간
-
웹 페이지 로딩의 종류는 두 가지로 분류 가능. 웹 사이트의 ①가장 첫 페이지 로딩과 ➁나머지 로딩시간
-
① 첫 페이지 로딩
-CSR은 html, css, 모든 js 스크립트들을 한번에 불러옴
-SSR은 필요한 부분의 html과 스크립트만 불러옴
-평균적으로 SSR이 더 빠름 -
➁ 나머지 로딩 (이외 페이지 이동 시) ???????????????????????????
-CSR은 첫 페이지 로딩 시 html, css, 모든 js 스크립트들을 이미 불러온 상태
-SSR은 필요한 부분의 html과 스크립트만 불러온 상태로 페이지 이동 시마다 다시 html과 스크립트를 불러와야 함
-평균적으로 CSR이 더 빠름
