💁 SSR
SSR은 Server Side Rendering의 약자로 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식이다. 그러면 클라이언트는 해당 HTML을 파싱만 해서 화면을 그린다.
Next.js에서는 SSR 방식으로 정적 html을 내려줘 초기 화면을 빠르게 렌더한 후에 hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환하는 작업을 수행한다.
CSR
CSR(Client Side Rendering)은 SSR과는 다르게 브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 뒤, 필요한 자바스크립트 번들을 다운로드하고 번들을 실행하여 동적으로 컨텐츠를 채우는 방식이다.
hydration이란?
서버에서 받은 정적 HTML에 이벤트 리스너를 추가하여 클릭하면 동작하는 동적인 페이지로 만드는 과정이다.
SSR 장점 🧐
SEO(검색 엔진 최적화) 측면에서 유리하다.
컨텐츠를 쉽게 인식하고 초기 로드가 빠르기 때문에 우선순위가 부여되고 상위에 노출될 가능성이 높기 때문이다.
블로그나 커머스 등 웹 애플리케이션에 적합하다.
빠른 초기 로딩 속도
CSR과 다르게 번들을 다운도드 받거나 실행할 필요가 없기 때문이다.
SSR 단점 🤔
1. hydration을 통해 동적인 화면으로 전환할 경우 상호작용 초기화가 비교적 느리다.
페이지 표시되기까지 걸리는 시간(TTV)과 상호작용까지 걸리는 시간(TTI) 사이에 격차가 발생한다는 뜻
그 사이에는 사용자가 버튼을 클릭해도 동작하지 않는다.
2. 구현 복잡도 높음
최근의 웹앱은 SSR과 CSR을 동시에 사용하는 경우가 많다.
클라이언트 사이드 로직과 서버 사이드 로직을 구분하면서 구현해야 하기 때문에 구현 복잡도가 높다.
