1. 개념 요약

SSR (Server Side Rendering) 은 사용자의 요청 시점에 서버에서 HTML을 생성해서 클라이언트에 전달하는 방식이다.

Next.js에서는 getServerSideProps 함수를 통해 SSR을 구현할 수 있다.

2. 배경 지식

클라이언트 렌더링(CSR)과의 차이점

• CSR은 HTML을 받아온 뒤 브라우저에서 JS로 내용을 채움 (FCP 느림)
• SSR은 HTML이 서버에서 완성되어 전달되기 때문에 FCP가 빠름
• 사용자 경험 및 SEO 측면에서 SSR이 유리할 수 있음

SSR이 필요한 상황

• 사용자마다 다른 데이터를 보여줘야 할 때
• 로그인 상태, 쿠키 기반 데이터 등 요청 시점에 결정되는 콘텐츠가 있을 때
• 실시간 데이터 (예: 뉴스, 주식, 실시간 대시보드 등)

3. 상세 설명

SSR의 작동 과정