Next.js 없이 SSR을 하려면 어떻게 해야 할까?

브라우저가 요청을 보내면 서버는 React SSR API로 JSX를 HTML 문자열로 변환한다. renderToString은 전체를 다 만든 뒤 한 번에 응답한다. renderToPipeableStream은 준비된 조각부터 스트리밍하며 Suspense 경계를 지원한다.

이렇게 만들어진 HTML에는 마크업만 있고 이벤트 핸들러가 없다. 그래서 서버는 응답에 클라이언트 번들을 불러올 <script> 태그와 서버가 사용한 초기 데이터를 함께 실어 보낸다.

브라우저가 HTML을 받으면 사용자는 곧바로 화면을 본다. 뒤이어 번들이 로드되면 hydrateRoot가 실행된다. 이때 React는 DOM을 새로 만들지 않고 기존 마크업에 이벤트 핸들러와 상태를 연결한다. 이 시점부터 인터랙션이 가능해진다.

Next.js 없이 SSR을 한다는 건 이 세 가지를 직접 관리한다는 뜻이다. 서버/클라이언트 두 벌의 빌드 구성, HTML 문서 조립과 초기 데이터 전달, 양쪽 렌더 결과를 일치시키는 일이다.