SSR은 무엇이고 언제 써야 할까: CSR, 하이드레이션, Next.js까지 현재 기준으로 정리 빠른 답 SSR은 첫 화면 HTML을 서버에서 먼저 만들어 보내는 방식이다. 다만 버튼과 입력이 실제로 반응하는 시점은 하이드레이션 이후일 수 있다. 브라우저는 SSR 페이지도 DOM, CSSOM, 렌더 트리, 레이아웃, 페인트, 컴포지팅을 그대로 거친다. SSR은 브라우저 렌더링을 없애는 기술이 아니라 시작 시점을 바꾸는 쪽에 가깝다. SEO와 초기 콘텐츠 노출이 중요하면 SSR이 도움이 되지만, 요청마다 HTML을 만들면 TTFB와 서버 비용이 늘 수 있다. 2026-04-07 기준 Next.js는 getServerSideProps 만으로 SSR을 설명하기 어렵다. App Router의 서버 컴포넌트, 스트리밍, 캐시 모델까지 함께 봐야 현재 동작과 가깝다. 목차 시간 흐름으로 이해하기 흐름으로 보기 SSR이 다시 중요해진 이유와 흔한 오해 SSR, CSR, SSG를 먼저 구분해 두기 요청부터 화면 반응까지: HTML, DOM, CSSOM, 하이드레이션 브라우저 렌더링 관점에서 보면 왜 SSR도 느릴 수 있을까 Next.js 현재 기준으로 다시 보기 스트리밍과 캐시를 같이 봐야 하는 이유 무엇을 측정해야 SSR의 효과가 보일까 언제 SSR을 선택하는 편이 잘 맞을까 현재 기준에서 바꿔 읽어야 할 오래된 설명 공식 문서와 참고 링크 시간 흐름으로 이해하기 요청 시작 브라우저가 URL을 요청하고 네트워크 왕복이 시작된다. → 서버 생성 서버가 요청 시점 데이터로 HTML을 만들거나 캐시된 결과를 꺼낸다. → 첫 표시 HTML과 CSS가 도착하면 브라우저가 첫 화면을 그리기 시작한다. → 연결 단계 자바스크립트가 로드되고 React가 기존 DOM에 연결된다. → 상호작용 가능 이벤트 핸들러가 붙고 클릭, 입력, 토글이 기대한 대로 동작한다. 흐름으로 보기 흐름 다이어그램 이 순서를 먼저 잡아두면 SSR이 바꾸는 구간과 바꾸지 않는 구간이 자연스럽...