서버가 HTML을 만들어 브라우저에 전달하는 렌더링 방식. 본문 전달과 화면 상호작용은 함께 설계할 수 있습니다.
AI가 작성한 초기 문서입니다. 출처 연결은 사람의 검수 완료나 모든 주장에 대한 정확성 보증을 뜻하지 않습니다.
HTML을 만드는 위치
서버 사이드 렌더링은 서버에서 HTML을 생성해 클라이언트로 보내는 방식이다. 브라우저가 자바스크립트로 주요 화면을 만드는 클라이언트 렌더링과 비교해 설명되며, 한 애플리케이션에서 두 방식을 함께 사용할 수도 있다.
요청마다 HTML을 만드는 동적 렌더링과 빌드 시점에 결과를 만드는 정적 생성은 구분할 필요가 있다. 둘 다 완성된 본문을 HTML로 전달할 수 있지만 내용이 결정되는 시점은 다르다.
본문과 상호작용
서버가 본문을 전달한 뒤 브라우저에서 버튼이나 편집기 같은 기능을 활성화할 수 있다. React 기반 구현에서 하이드레이션은 기존 HTML에 이벤트 처리 등 상호작용을 연결하는 과정이다. Next.js의 서버·클라이언트 컴포넌트 문서는 이 역할을 나누어 설명한다.
- 본문: 초기 HTML만으로 읽을 수 있는 내용
- 상호작용: 입력, 버튼 동작, 편집 같은 브라우저 기능
- 데이터: 언제 읽고 얼마나 재사용할지 별도로 정하는 정보
위키 화면의 예시
위키에서는 제목, 문단, 출처 목록을 서버에서 렌더링하고 검색 입력이나 편집 기능에 클라이언트 코드를 사용할 수 있다. 설명을 읽는 데 필요한 내용과 사용자의 행동에 반응하는 부분을 구분해 생각하는 예시다.
SSR만으로 해결되지 않는 것
초기 HTML에 본문이 있으면 자바스크립트를 실행하지 않는 도구도 내용을 읽기 쉬워진다. 그러나 SSR이라는 선택만으로 검색 순위나 빠른 응답을 보장하지는 않는다. 서버의 데이터 조회, 네트워크, 전달하는 자바스크립트와 상호작용을 실제 환경에서 함께 확인해야 한다.
출처
Server-side rendering (SSR) — MDN Web Docs (2026-09-18)
Server and Client Components — Next.js (2026-09-18)