무엇
renderToStaticMarkup은 React 트리를 순수 HTML 문자열로 그리는 API다. React가 하이드레이션에 쓰는 내부 속성을 붙이지 않는다.
import { renderToStaticMarkup } from 'react-dom/server'
const html = renderToStaticMarkup(<Page />)
renderToString과 시그니처는 같지만 결과물에 하이드레이션용 마커가 없다는 점이 다르다.
무슨 일이 일어나나
출력된 HTML은 하이드레이션할 수 없다. 애초에 클라이언트에서 다시 살아날 필요가 없는, 그 자체로 끝인 정적 페이지를 만들 때 쓰는 API다. renderToString과 마찬가지로 스트리밍을 지원하지 않고, 컴포넌트가 suspend되면 fallback을 그대로 HTML에 박아 넣는다.
사용법
app.use('/', (request, response) => {
const html = renderToStaticMarkup(<Page />)
response.send(html)
})
이메일 템플릿, PDF로 변환할 HTML, 인터랙션이 필요 없는 정적 페이지처럼 클라이언트에서 React가 다시 붙지 않는 결과물에 쓴다. 반대로 이후 hydrateRoot로 인터랙티브하게 만들 페이지라면 renderToString이나 스트리밍 API를 써야 한다.
실무 예시
알림 이메일 본문을 React 컴포넌트로 작성하고, 발송 시점에 renderToStaticMarkup으로 HTML 문자열을 뽑아 메일 서비스에 넘기는 식이 대표적이다.
왜 중요한가
인터랙티브 SSR에는 맞지 않는 API지만, 이메일·PDF처럼 하이드레이션이 필요 없는 정적 HTML을 뽑을 때는 지금도 유효하다. 쓰임이 좁은 만큼 자주 마주치진 않는다.
Reference