Portfolio

renderToStaticNodeStream은 non-interactive형 React 트리를 읽기 가능한 Node.js 스트림으로 렌더링합니다.


const stream = renderToStaticNodeStream(reactNode)

`renderToStaticNodeStream(reactNode)`

서버에서 renderToStaticNodeStream을 호출하면 읽기 가능(readable)한 Node.js 스트림을 가져옵니다.


import { renderToStaticNodeStream } from 'react-dom/server';

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

스트림은 React 컴포넌트의 비대화형(none-interactive) HTML 출력을 생성합니다.

매개변수

reactNode: HTML로 렌더링하려는 React 노드. 예를 들어, <App />과 같은 JSX 엘리먼트입니다.

반환값

HTML 문자열을 출력하는 읽기 가능한 Node.js 스트림. 결과물인 HTML은 클라이언트에서 hydrate할 수 없습니다.

주의사항

renderToStaticNodeStream의 출력물은 hydrate 할 수 없습니다.

이 메서드는 출력물을 반환하기 전에 모든 Suspense Boundary가 완료될 때까지 기다립니다.

React 18부터 이 메서드는 모든 출력을 버퍼링하므로, 실제로 스트리밍의 이점을 누릴 수 없습니다.

반환된 스트림은 utf-8로 인코딩된 바이트 스트림입니다. 다른 인코딩 스트림이 필요한 경우, 텍스트 변환을 위한 변환 스트림을 제공하는 iconv-lite와 같은 프로젝트를 살펴보세요.

사용법

1. StreamReact 트리를 HTML로 읽기 가능한 Node.js 스트림에 렌더링하기

renderToStaticNodeStream을 호출하면 서버 응답으로 연결할 수 있는 읽기 가능한 Node.js 스트림을 가져옵니다:


import { renderToStaticNodeStream } from 'react-dom/server';

// The route handler syntax depends on your backend framework
// 라우트 핸들러 구문은 백엔드 프레임워크에 따라 다릅니다.
app.use('/', (request, response) => {
  const stream = renderToStaticNodeStream(<Page />);
  stream.pipe(response);
});

스트림은 React 컴포넌트의 초기 비대화형 HTML 출력을 생성합니다.

함정

이 메서드는 hydrate 할 수 없는 비대화형 HTML을 렌더링합니다. 이는 React를 간단한 정적 페이지 생성기로 사용하거나 이메일과 같이 완전히 정적인 콘텐츠를 렌더링할 때 유용합니다.

인터랙티브 앱은 서버에서는 renderToPipeableStream을, 클라이언트에서는 hydrateRoot를 사용해야 합니다.