무엇
renderToString은 React 트리를 HTML 문자열로 그려 그 자리에서 바로 돌려주는 서버 렌더링 API다. 스트림이 아니라 완성된 문자열 하나를 동기로 받는다.
import { renderToString } from 'react-dom/server'
const html = renderToString(<App />)
options로는 useId가 생성하는 ID의 접두어를 지정하는 identifierPrefix를 받는다.
무슨 일이 일어나나
스트리밍도, 데이터를 기다리는 것도 지원하지 않는다. 컴포넌트가 suspend되면(예: use로 아직 안 풀린 Promise를 읽으면) React는 그 지점에서 기다리지 않고 가장 가까운 <Suspense>의 fallback을 그대로 HTML에 박아 넣는다. 실제 콘텐츠는 클라이언트 하이드레이션 이후에야 나타난다.
사용법
app.use('/', (request, response) => {
const html = renderToString(<App />)
response.send(`<!doctype html>${html}`)
})
공식 문서는 이 API를 현재 우선 API로 두지 않는다. Node.js라면 renderToPipeableStream, 엣지·Web Streams 환경이면 renderToReadableStream, 정적 생성이면 prerender/prerenderToNodeStream을 권한다. 브라우저에서도 동작은 하지만 클라이언트 코드에서 쓰는 건 권장하지 않는다.
실무 예시
새 코드에서 골라 쓸 이유는 거의 없다. Suspense로 데이터를 기다리는 요구가 없는 아주 단순한 레거시 SSR, 또는 스트리밍 인프라가 없는 옛 서버 코드에서나 남아 있다.
왜 중요한가
React 18 이전에는 표준 SSR API였지만 지금은 스트리밍 API들에 자리를 내줬다. 레거시 코드를 읽거나 마이그레이션할 때 알아보는 정도면 충분하고, 새로 쓸 이유는 없다.
Reference