서버 사이드 렌더링 (SSR)

서버 사이드 렌더링은 서버에서 HTML을 생성해 클라이언트로 보내는 방식이다. 브라우저가 자바스크립트로 주요 화면을 만드는 클라이언트 렌더링과 비교해 설명되며, 한 애플리케이션에서 두 방식을 함께 사용할 수도 있다.

요청마다 HTML을 만드는 동적 렌더링과 빌드 시점에 결과를 만드는 정적 생성은 구분할 필요가 있다. 둘 다 완성된 본문을 HTML로 전달할 수 있지만 내용이 결정되는 시점은 다르다.

서버가 본문을 전달한 뒤 브라우저에서 버튼이나 편집기 같은 기능을 활성화할 수 있다. React 기반 구현에서 하이드레이션은 기존 HTML에 이벤트 처리 등 상호작용을 연결하는 과정이다. Next.js의 서버·클라이언트 컴포넌트 문서는 이 역할을 나누어 설명한다.

• 본문: 초기 HTML만으로 읽을 수 있는 내용
• 상호작용: 입력, 버튼 동작, 편집 같은 브라우저 기능
• 데이터: 언제 읽고 얼마나 재사용할지 별도로 정하는 정보

위키에서는 제목, 문단, 출처 목록을 서버에서 렌더링하고 검색 입력이나 편집 기능에 클라이언트 코드를 사용할 수 있다. 설명을 읽는 데 필요한 내용과 사용자의 행동에 반응하는 부분을 구분해 생각하는 예시다.

초기 HTML에 본문이 있으면 자바스크립트를 실행하지 않는 도구도 내용을 읽기 쉬워진다. 그러나 SSR이라는 선택만으로 검색 순위나 빠른 응답을 보장하지는 않는다. 서버의 데이터 조회, 네트워크, 전달하는 자바스크립트와 상호작용을 실제 환경에서 함께 확인해야 한다.