resumeToPipeableStream은 사전 렌더링된 React 트리를 파이프 가능한 Node.js Stream으로 스트리밍합니다.
const {pipe, abort} = await resumeToPipeableStream(reactNode, postponedState, options?)레퍼런스
resumeToPipeableStream(node, postponed, options?)
resumeToPipeableStream을 호출해 사전 렌더링된 React 트리의 렌더링을 재개하고, 이를 HTML로 Node.js Stream에 렌더링합니다.
import { resumeToPipeableStream } from 'react-dom/server';
import {getPostponedState} from './storage';
async function handler(request, response) {
const postponed = await getPostponedState(request);
const {pipe} = resumeToPipeableStream(<App />, postponed, {
onShellReady: () => {
pipe(response);
}
});
}매개변수
reactNode:prerender를 호출할 때 전달한 React 노드입니다. 예를 들어,<App />과 같은 JSX 엘리먼트입니다. 전체 문서를 나타낼 것으로 예상되므로App컴포넌트는<html>태그를 렌더링해야 합니다.postponedState: prerender API에서 반환된 불분명한postpone객체로, 저장해 둔 위치(예: Redis, 파일, S3)에서 불러옵니다.- optional
options: 스트리밍 옵션을 지정할 수 있는 객체입니다.- optional
nonce:script-srcContent-Security-Policy에서 스크립트를 허용하기 위한nonce문자열입니다. - optional
signal: 서버 렌더링을 중단하고 나머지를 클라이언트에서 렌더링할 수 있게 하는 중단 신호입니다. - optional
onError: 서버 오류가 발생할 때마다, 복구 가능 또는 불가능에 관계없이 호출되는 콜백입니다. 기본적으로console.error만 호출합니다. 충돌 보고를 기록하도록 재정의하는 경우에도 반드시console.error를 호출해야 합니다. - optional
onShellReady: 셸이 렌더링된 직후에 실행되는 콜백입니다. 여기서pipe를 호출해 스트리밍을 시작할 수 있습니다. React는 HTML 로딩 폴백을 콘텐츠로 대체하는 인라인<script>태그와 함께 셸 뒤에 추가 콘텐츠를 스트리밍합니다. - optional
onShellError: 초기 셸을 렌더링하는 데 오류가 발생하면 호출되는 콜백입니다. 오류를 인자로 받습니다. 스트림에서 아직 바이트가 전송되지 않았고,onShellReady나onAllReady도 호출되지 않으므로 폴백 HTML 셸을 출력하거나 prelude를 사용할 수 있습니다.
- optional
반환값
resumeToPipeableStream은 두 개의 메서드를 가진 객체를 반환합니다.
pipe는 HTML을 제공된 쓰기 가능한 Node.js 스트림으로 출력합니다. 스트리밍을 활성화하려면onShellReady에서, 크롤러와 정적 생성을 사용하려면onAllReady에서pipe를 호출합니다.abort를 사용하면 서버 렌더링을 중단하고 나머지는 클라이언트에서 렌더링할 수 있습니다.
주의 사항
resumeToPipeableStream은bootstrapScripts,bootstrapScriptContent,bootstrapModules옵션을 받지 않습니다. 대신postponedState를 생성하는prerender호출에 이 옵션들을 전달해야 합니다. 또한 쓰기 가능한 스트림에 부트스트랩 콘텐츠를 수동으로 주입할 수도 있습니다.prerender와resumeToPipeableStream에서 접두사가 동일해야 하므로,resumeToPipeableStream은identifierPrefix를 받지 않습니다.nonce는 prerender에 전달할 수 없으므로, prerender에 스크립트를 제공하지 않는 경우에만resumeToPipeableStream에nonce를 전달해야 합니다.resumeToPipeableStream은 사전 렌더링이 완전히 완료되지 않은 컴포넌트를 찾을 때까지 루트부터 다시 렌더링합니다. 사전 렌더링이 완전히 완료된 컴포넌트(해당 컴포넌트와 자식들의 사전 렌더링이 모두 완료된 경우)만 완전히 건너뜁니다.
사용법
추가로 읽어보기
재개 동작은 renderToPipeableStream과 유사합니다. 더 많은 예시는 renderToPipeableStream의 사용법 섹션을 확인하세요.
prerenderToNodeStream의 사용법 섹션에는 prerenderToNodeStream 사용 방법에 대한 예시가 포함되어 있습니다.