Pitfall

renderToString은 스트리밍 또는 데이터 대기를 지원하지 않음.

• 참고: 대안

renderToString은 React 트리를 HTML 문자열로 렌더링함.

const html = renderToString(reactNode)

---

Reference

renderToString(reactNode)

서버에서 renderToString을 호출하여 앱을 HTML로 렌더링 할 수 있음.

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

const html = renderToString(<App />);

클라이언트에서 hydrateRoot를 호출하여 서버에서 생성된 HTML을 인터랙티브하게 만들 수 있음.

Parameters

• reactNode: HTML로 렌더링하려는 React 노드. 예를 들어, <App />과 같은 JSX 노드.
• options (optional): 서버 렌더링을 위한 객체.
  • identifierPrefix (optional): React가 useId에 의해 생성된 ID에 사용하는 문자열 접두사. 같은 페이지에서 여러 루트를 사용할 때 충돌을 피하는 데 유용함.

Returns

HTML 문자열을 반환함.

Caveats

• renderToString은 Suspense를 제한적으로 지원함. 컴포넌트가 일시 중단되면 renderToString은 즉시 폴백을 HTML로 보냄.

• renderToString은 브라우저에서 작동하지만, 클라이언트 코드에서 사용하는 것은 권장하지 않음.

---

Usage

Rendering a React tree as HTML to a string

renderToString을 호출하면 앱을 서버 응답과 함께 보낼 수 있는 HTML 문자열로 렌더링할 수 있음:

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

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

이렇게 하면 React 컴포넌트의 초기 비대화형 HTML 출력이 생성됨. 클라이언트에서는 서버에서 생성된 HTML을 hydrate하고 인터랙티브하게 만들기 위해 hydrateRoot를 호출해야 함.

Pitfall

renderToString은 스트리밍 또는 데이터 대기를 지원하지 않음.

• 참고: 대안

---

Alternatives

Migrating from renderToString to a streaming method on the server

renderToString은 즉시 문자열을 반환하므로, 스트리밍이나 데이터 대기를 지원하지 않음.

가능하면 이러한 모든 기능을 갖춘 대체 방법을 사용하는 것이 좋음:

• Node.js를 사용하는 경우, renerToPipeableStream을 사용할 것.
• Web Stream과 함께 Deno 또는 최신 엣지 런타임을 사용하는 경우, renderToReadableStream을 사용할 것.

서버 환경이 스트림을 지원하지 않는 경우 renderToString을 계속 사용할 수 있음.

Removing renderToString from the client code

클라이언트에서 일부 컴포넌트를 HTML로 변환하기 위해 renderToString을 사용하는 경우도 있음.

// 🚩 Unnecessary: using renderToString on the client
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // For example, "<svg>...</svg>"

클라이언트에서 react-dom/server를 가져오면 번들 크기가 불필요하게 증가하므로 피해야 함. 브라우저에서 일부 컴포넌트를 HTML로 렌더링해야 하는 경우 createRoot를 사용하여 DOM에서 HTML을 읽어야 함:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // For example, "<svg>...</svg>"

flushSync 호출은 innerHTML 프로퍼티를 읽기 전에 DOM을 업데이트하기 위해 필요함.

---

Troubleshooting

When a component suspends, the HTML always contains a fallback

renderToString은 Suspense를 완전히 지원하지 않음.

일부 컴포넌트가 일시 중단되는 경우(예: lazy로 정의되었거나 데이터를 fetch하는 경우), renderToString은 해당 콘텐츠가 resolve될 때까지 기다리지 않음. 대신 renderToString은 상위에서 가장 가까운 <Suspense> boundary를 찾아 HTML에서 해당 fallback prop을 렌더링함. 콘텐츠는 클라이언트 코드가 로드될 때까지 표시되지 않음.

이 문제를 해결하려면 권장 스트리밍 솔루션 중 하나를 사용할 것. 이 솔루션은 서버에서 확인되는 대로 콘텐츠를 청크로 스트리밍하여 클라이언트 코드가 로드되기 전에 사용자가 페이지가 점진적으로 채워지는 것을 볼 수 있도록 함.