Skip to content

Commit

Permalink
docs: update renderToString.md
Browse files Browse the repository at this point in the history
  • Loading branch information
lumirlumir committed Jan 3, 2025
1 parent d2fd63f commit 752a669
Showing 1 changed file with 16 additions and 32 deletions.
48 changes: 16 additions & 32 deletions src/content/reference/react-dom/server/renderToString.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@ import { renderToString } from 'react-dom/server';
const html = renderToString(<App />);
```
클라이언트에서 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 호출하면 서버에서 생성된 HTML을 상호작용하게 만듭니다.
클라이언트에서 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 호출하면 서버에서 생성된 HTML을 상호작용하게 만듭니다.
[아래에서 더 많은 예시를 참고하세요.](#usage)
[아래 예시를 참고하세요.](#usage)
#### 매개변수 {/*parameters*/}
* `reactNode`: HTML로 렌더링할 React 노드입니다. 예를 들어 `<App />`과 같은 JSX 노드입니다.
* **optional** `options`: 서버 렌더링을 위한 객체입니다.
* **optional** `identifierPrefix`: [`useId`.](/reference/react/useId)에 의해 생성된 ID에 대해 React가 사용하는 문자열 접두사입니다. 같은 페이지에서 여러 루트를 사용할 때 충돌을 피하기 위해 유용합니다. [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)에 전달된 접두사와 동일해야 합니다.
* **optional** `identifierPrefix`: [`useId`](/reference/react/useId)에 의해 생성된 ID에 대해 React가 사용하는 문자열 접두사입니다. 같은 페이지에서 여러 루트를 사용할 때 충돌을 피하기 위해 유용합니다. [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)에 전달된 접두사와 동일해야 합니다.
#### 반환값 {/*returns*/}
Expand All @@ -60,7 +60,7 @@ HTML 문자열.
### React 트리를 HTML 문자열로 렌더링하기 {/*rendering-a-react-tree-as-html-to-a-string*/}
서버 응답과 함께 보낼 수 있는 HTML 문자열로 앱을 렌더링하려면 `renderToString`을 호출하세요:
서버 응답과 함께 보낼 수 있는 HTML 문자열로 앱을 렌더링하려면 `renderToString`을 호출하세요.
```js {5-6}
import { renderToString } from 'react-dom/server';
Expand All @@ -72,7 +72,7 @@ app.use('/', (request, response) => {
});
```
이렇게 하면 React 컴포넌트의 초기 비대화형 HTML 출력이 생성됩니다. 클라이언트에서 서버에서 생성된 HTML을 *hydrate*하여 상호작용할 수 있도록 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 를 실행해야 합니다.
이는 React 컴포넌트의 초기 상호작용하지 않는 HTML 출력을 생성합니다. 클라이언트에서 서버에서 생성된 HTML을 *Hydrate*하여 상호작용할 수 있도록 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 실행해야 합니다.
<Pitfall>
Expand All @@ -85,43 +85,33 @@ app.use('/', (request, response) => {
## 대안 {/*alternatives*/}
<<<<<<< HEAD
### 서버에서 `renderToString`을 스트리밍 함수로 마이그레이션 {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
### 서버에서 `renderToString`을 스트리밍 렌더링으로 마이그레이션 {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
`renderToString`은 문자열을 즉시 반환하므로 스트리밍이나 데이터 대기를 지원하지 않습니다.
=======
### Migrating from `renderToString` to a streaming render on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/}
`renderToString`은 문자열을 즉시 반환하므로, 로딩 중인 콘텐츠를 스트리밍하는 것을 지원하지 않습니다.
`renderToString` returns a string immediately, so it does not support streaming content as it loads.
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
가능하면 다음과 같은 완전한 기능을 갖춘 대안을 사용하는 것을 권장합니다.
가능하면 다음과 같은 완전한 기능을 갖춘 대안을 사용하는 것을 권장합니다:
* Node.js를 사용하는 경우 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) 을 사용하세요.
* Deno와 최신 엣지 런타임에서 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)을 사용하는 경우 [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) 을 사용하세요
* Node.js를 사용하는 경우 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)을 사용하세요.
* Deno와 최신 엣지 런타임에서 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)을 사용하는 경우 [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream)을 사용하세요.
서버 환경에서 스트림을 지원하지 않는 경우에도 `renderToString`을 계속 사용할 수 있습니다.
---
<<<<<<< HEAD
### 클라이언트 코드에서 `renderToString` 제거하기 {/*removing-rendertostring-from-the-client-code*/}
=======
### Migrating from `renderToString` to a static prerender on the server {/*migrating-from-rendertostring-to-a-static-prerender-on-the-server*/}
`renderToString` returns a string immediately, so it does not support waiting for data to load for static HTML generation.
We recommend using these fully-featured alternatives:
* If you use Node.js, use [`prerenderToNodeStream`.](/reference/react-dom/static/prerenderToNodeStream)
* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`prerender`.](/reference/react-dom/static/prerender)
* If you use Node.js, use [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream).
* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`prerender`](/reference/react-dom/static/prerender).
You can continue using `renderToString` if your static site generation environment does not support streams.
---
### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/}
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
### 클라이언트 코드에서 `renderToString` 제거하기 {/*removing-rendertostring-from-the-client-code*/}
클라이언트에서 일부 컴포넌트를 HTML로 변환하기 위해 `renderToString`을 사용하기도 합니다.
Expand All @@ -133,7 +123,7 @@ const html = renderToString(<MyIcon />);
console.log(html); // 예를 들어, "<svg>...</svg>"
```
**클라이언트에서** `react-dom/server`를 가져오면 불필요하게 번들 크기가 커지므로 피해야 합니다. 브라우저에서 일부 컴포넌트를 HTML로 렌더링해야 할 경우 [`createRoot`](/reference/react-dom/client/createRoot) 사용하고 DOM에서 HTML을 읽으세요:
**클라이언트에서** `react-dom/server`를 가져오면 불필요하게 번들 크기가 커지므로 피해야 합니다. 브라우저에서 일부 컴포넌트를 HTML로 렌더링해야 할 경우 [`createRoot`](/reference/react-dom/client/createRoot) 사용하고 DOM에서 HTML을 읽으세요.
```js
import { createRoot } from 'react-dom/client';
Expand All @@ -157,12 +147,6 @@ console.log(div.innerHTML); // 예를 들어, "<svg>...</svg>"
`renderToString`은 Suspense를 완벽하게 지원하지 않습니다.
<<<<<<< HEAD
일부 컴포넌트가 일시 중단되거나 (예를 들어, [`lazy`](/reference/react/lazy)와 함께 정의되거나 데이터를 가져올 때) `renderToString`은 콘텐츠가 해결될 때까지 기다리지 않습니다. `renderToString`는 그 위에 가장 가까운 [`<Suspense>`](/reference/react/Suspense) 경계를 찾아 `fallback` 프로퍼티를 HTML에 렌더링합니다. 내용은 클라이언트 코드가 로드될 때까지 나타나지 않습니다.
=======
If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [`<Suspense>`](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads.
To solve this, use one of the [recommended streaming solutions.](#alternatives) For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML.
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
일부 컴포넌트가 일시 중단<sup>Suspend</sup>되거나 (예를 들어, [`lazy`](/reference/react/lazy)와 함께 정의되거나 데이터를 가져올 때) `renderToString`은 콘텐츠가 해결될 때까지 기다리지 않습니다. `renderToString`는 그 위에 가장 가까운 [`<Suspense>`](/reference/react/Suspense) 경계를 찾아 `fallback` 프로퍼티를 HTML에 렌더링합니다. 내용<sup>Content</sup>은 클라이언트 코드가 로드될 때까지 나타나지 않습니다.
이를 해결하기 위해 [권장하는 스트리밍 솔루션](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) 중 하나를 사용하세요. 사용자가 클라이언트 코드가 로드되기 전에 페이지가 점진적으로 채워지는 것을 볼 수 있도록 서버에서 해결할 때 컨텐츠를 청크로 스트리밍할 수 있습니다.
이를 해결하기 위해 [권장하는 스트리밍 솔루션](#alternatives) 중 하나를 사용하세요. <!-- textlint-disable --> For server side rendering, they can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. For static site generation, they can wait for all the content to resolve before generating the static HTML. <!-- textlint-enable -->

0 comments on commit 752a669

Please sign in to comment.