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?)
Usage사용법
- Rendering a React tree as static HTML to a Node.js Readable StreamReact 트리를 HTML로 읽기 가능한 Node.js 스트림에 렌더링하기

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