renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Reference참조
  • renderToNodeStream(reactNode, options?)
• Usage사용법
  • Rendering a React tree as HTML to a Node.js Readable StreamReact 트리를 HTML로 읽기 가능한 Node.js 스트림에 렌더링하기

Reference참조

renderToNodeStream(reactNode, options?)

On the server, call renderToNodeStream to get a Node.js Readable Stream which you can pipe into the response. 서버에서 renderToNodeStream을 호출하면 응답에 연결할 수 있는 읽기 가능한 Node.js 스트림을 가져옵니다.

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

const stream = renderToNodeStream(<App />);
stream.pipe(response);

On the client, call hydrateRoot to make the server-generated HTML interactive. 클라이언트에서 hydrateRoot를 호출하여 서버에서 생성된 HTML을 상호작용 가능하도록 만드세요.

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

Parameters매개변수

• reactNode: A React node you want to render to HTML. For example, a JSX element like <App />. 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. Must be the same prefix as passed to hydrateRoot.

Returns반환값

A Node.js Readable Stream that outputs an HTML string. HTML 문자열을 출력하는 읽기 가능한 Node.js 스트림.

Caveats주의사항

• 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. This is why it’s recommended that you migrate to renderToPipeableStream instead. React 18부터 이 메서드는 모든 출력을 버퍼링하므로, 실제로 스트리밍의 이점을 누릴 수 없습니다. 따라서 renderToPipeableStream으로 마이그레이션하는 것을 권장합니다.

• 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 HTML to a Node.js Readable StreamReact 트리를 HTML로 읽기 가능한 Node.js 스트림에 렌더링하기

Call renderToNodeStream to get a Node.js Readable Stream which you can pipe to your server response: renderToNodeStream을 호출하면 서버 응답으로 연결할 수 있는 읽기 가능한 Node.js 스트림을 가져옵니다:

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

// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

The stream will produce the initial non-interactive HTML output of your React components. On the client, you will need to call hydrateRoot to hydrate that server-generated HTML and make it interactive. 스트림은 React 컴포넌트의 초기 비대화형 HTML 출력을 생성합니다. 클라이언트에서 서버에서 생성된 HTML을 hydrate 하고 상호작용 가능하도록 하려면 hydrateRoot를 호출해야 합니다.