API Reference
Server APIs

renderToStaticNodeStream

번역:이승효고석영

renderToStaticNodeStream renders a non-interactive React tree to a Node.js Readable Stream. renderToStaticNodeStream은 비대화형 React 트리를 읽기 가능한 Node.js 스트림으로 렌더링합니다.

const stream = renderToStaticNodeStream(reactNode, options?)

Reference참조

renderToStaticNodeStream(reactNode, options?)

On the server, call renderToStaticNodeStream to get a Node.js Readable Stream. 서버에서 renderToStaticNodeStream을 호출하면 읽기 가능한 Node.js 스트림을 가져옵니다.

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

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

See more examples below. 아래에서 더 많은 예시를 확인하세요.

The stream will produce non-interactive HTML output of your React components. 스트림은 React 컴포넌트의 비대화형 HTML 출력을 생성합니다.

Parameters매개변수

  • reactNode: A React node you want to render to HTML. For example, a JSX element like <Page />. reactNode: HTML로 렌더링하려는 React 노드. 예를 들어, <App />과 같은 JSX 엘리먼트입니다.

  • optional options: An object for server render.

    • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

Returns반환값

A Node.js Readable Stream that outputs an HTML string. The resulting HTML can’t be hydrated on the client. HTML 문자열을 출력하는 읽기 가능한 Node.js 스트림. 결과물인 HTML은 클라이언트에서 hydrate할 수 없습니다.

Caveats주의사항

  • renderToStaticNodeStream output cannot be hydrated. renderToStaticNodeStream의 출력물은 hydrate 할 수 없습니다.

  • This method will wait for all Suspense boundaries to complete before returning any output. 이 메서드는 출력물을 반환하기 전에 모든 Suspense 경계가 완료될 때까지 기다립니다.

  • As of React 18, this method buffers all of its output, so it doesn’t actually provide any streaming benefits. React 18부터 이 메서드는 모든 출력을 버퍼링하므로, 실제로 스트리밍의 이점을 누릴 수 없습니다.

  • The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text. 반환된 스트림은 utf-8로 인코딩된 바이트 스트림입니다. 다른 인코딩 스트림이 필요한 경우, 텍스트 변환을 위한 변환 스트림을 제공하는 iconv-lite와 같은 프로젝트를 살펴보세요.

Usage사용법

Rendering a React tree as static HTML to a Node.js Readable StreamReact 트리를 HTML로 읽기 가능한 Node.js 스트림에 렌더링하기

Call renderToStaticNodeStream to get a Node.js Readable Stream which you can pipe to your server response: 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);
});

The stream will produce the initial non-interactive HTML output of your React components. 스트림은 React 컴포넌트의 초기 비대화형 HTML 출력을 생성합니다.

Pitfall | 함정

This method renders non-interactive HTML that cannot be hydrated. This is useful if you want to use React as a simple static page generator, or if you’re rendering completely static content like emails. 이 메서드는 hydrate 할 수 없는 비대화형 HTML을 렌더링합니다. 이는 React를 간단한 정적 페이지 생성기로 사용하거나 이메일과 같이 완전히 정적인 콘텐츠를 렌더링할 때 유용합니다.

Interactive apps should use renderToPipeableStream on the server and hydrateRoot on the client. 인터랙티브 앱은 서버에서는 renderToPipeableStream을, 클라이언트에서는 hydrateRoot를 사용해야 합니다.

PreviousrenderToPipeableStream