resumeAndPrerenderToNodeStream

01무엇

resumeAndPrerenderToNodeStream은 resumeAndPrerender의 Node.js 버전이다. prerenderToNodeStream이 미완성으로 남긴 트리를 이어받아, 다시 정적 HTML로 완성해 Node.js Stream으로 돌려준다.

Deno나 엣지 런타임처럼 Web Streams를 쓰는 환경이면 이 API 대신 resumeAndPrerender를 쓴다.

import { resumeAndPrerenderToNodeStream } from 'react-dom/static'
import { getPostponedState } from './storage'

async function handler(request: Request, writable: NodeJS.WritableStream) {
  const postponed = JSON.parse(await getPostponedState(request))
  const { prelude } = await resumeAndPrerenderToNodeStream(<App />, postponed)
  prelude.pipe(writable)
}

02무슨 일이 일어나나

동작 모델은 resumeAndPrerender와 같다 — 멈춘 지점부터 다시 렌더링을 이어 정적 HTML을 완성하고, 이번에도 다 못 끝나면 새 postponed를 돌려준다. 다른 점은 결과를 Web Stream이 아니라 Node.js Stream으로 준다는 것뿐이다. nonce는 지원하지 않는다.

03사용법

import { resumeAndPrerenderToNodeStream } from 'react-dom/static'
import { getPostponedState, savePostponedState } from './storage'

async function regenerate(pageId: string) {
  const postponed = JSON.parse(await getPostponedState(pageId))
  const { prelude, postponed: stillPending } = await resumeAndPrerenderToNodeStream(<App />, postponed)
  if (stillPending) {
    await savePostponedState(pageId, stillPending)
  }
  return prelude
}

signal로 중간에 끊을 수 있고, onError로 서버 에러를 로깅한다. 클라이언트에서는 최종 HTML을 hydrateRoot로 인터랙티브하게 만든다.

04실무 예시

Node.js 기반 재생성 파이프라인에서 쓴다. prerenderToNodeStream으로 만든 정적 페이지가 데이터 대기로 미완성이었을 때, 이후 재생성 작업에서 resumeAndPrerenderToNodeStream으로 이어 완성된 HTML을 캐시에 채운다.

05왜 중요한가

resumeAndPrerender와 마찬가지로 아주 니치한 API다. Node.js 환경에서 여러 단계로 나눠 정적 생성을 이어가는 프레임워크 내부 로직에서나 마주친다.

Reference