Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions src/content/reference/react-dom/static/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,26 @@ title: Static React DOM APIs

<Intro>

The `react-dom/static` APIs let you generate static HTML for React components. They have limited functionality compared to the streaming APIs. A [framework](/learn/creating-a-react-app#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
`react-dom/static` API를 사용하면 React 컴포넌트의 정적 HTML을 생성할 수 있습니다. 이 API는 스트리밍 API와 비교해 기능이 제한적입니다. [프레임워크](/learn/creating-a-react-app#full-stack-frameworks)가 대신 호출할 수도 있습니다. 대부분의 컴포넌트는 이를 import하거나 사용할 필요가 없습니다.

</Intro>

---

## Static APIs for Web Streams {/*static-apis-for-web-streams*/}
## Web 스트림용 정적 API {/*static-apis-for-web-streams*/}

다음 메서드들은 브라우저, Deno, 및 일부 최신 엣지 런타임을 포함하는 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 환경에서만 사용할 수 있습니다.

* [`prerender`](/reference/react-dom/static/prerender) renders a React tree to static HTML with a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)
* <ExperimentalBadge /> [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) continues a prerendered React tree to static HTML with a [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream).
* [`prerender`](/reference/react-dom/static/prerender)React 트리를 [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)을 사용해 정적 HTML로 렌더링합니다.
* <ExperimentalBadge /> [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender)는 사전 렌더링된 React 트리를 [Readable Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream)을 사용해 정적 HTML로 이어서 렌더링합니다.

Node.js also includes these methods for compatibility, but they are not recommended due to worse performance. Use the [dedicated Node.js APIs](#static-apis-for-nodejs-streams) instead.
Node.js에도 호환성을 위해 이 메서드들이 포함되어 있지만, 성능이 더 낮아 권장되지 않습니다. 대신 [전용 Node.js API](#static-apis-for-nodejs-streams)를 사용하세요.

---

## Static APIs for Node.js Streams {/*static-apis-for-nodejs-streams*/}
## Node.js 스트림용 정적 API {/*static-apis-for-nodejs-streams*/}

다음 메서드들은 [Node.js Streams](https://nodejs.org/api/stream.html) 환경에서만 사용할 수 있습니다.

* [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) renders a React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html)
* <ExperimentalBadge /> [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) continues a prerendered React tree to static HTML with a [Node.js Stream.](https://nodejs.org/api/stream.html)

* [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)은 React 트리를 [Node.js Stream](https://nodejs.org/api/stream.html)을 사용해 정적 HTML로 렌더링합니다.
* <ExperimentalBadge /> [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream)은 사전 렌더링된 React 트리를 [Node.js Stream](https://nodejs.org/api/stream.html)을 사용해 정적 HTML로 이어서 렌더링합니다.
14 changes: 7 additions & 7 deletions src/content/reference/react-dom/static/prerender.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@ async function handler(request, response) {

#### 반환값 {/*returns*/}

`prerender` returns a Promise:
- If rendering the is successful, the Promise will resolve to an object containing:
- `prelude`: a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
- `postponed`: a JSON-serializeable, opaque object that can be passed to [`resume`](/reference/react-dom/server/resume) if `prerender` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)
`prerender`는 Promise를 반환합니다.
- 렌더링에 성공하면 Promise는 다음을 포함한 객체로 resolve됩니다.
- `prelude`: HTML을 담은 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)입니다. 이 스트림을 사용해 응답을 청크 단위로 전송하거나, 전체 스트림을 문자열로 읽을 수 있습니다.
- `postponed`: JSON으로 직렬화 가능한 불투명 객체입니다. `prerender`가 완료되지 않은 경우 [`resume`](/reference/react-dom/server/resume)에 전달할 수 있습니다. 완료된 경우에는 `null`이며, 이는 `prelude`에 모든 콘텐츠가 포함되어 재개가 필요 없음을 의미합니다.
- 렌더링에 실패하면 Promise는 reject됩니다. [이 값을 사용해 fallback 셸을 출력하세요.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell)

#### 주의 사항 {/*caveats*/}

Expand All @@ -77,7 +77,7 @@ async function handler(request, response) {

정적 `prerender` API는 정적 사이트 생성<sup>SSG, Static Site Generation</sup>에 사용됩니다. `renderToString`과 달리 `prerender`는 해결되기 전에 모든 데이터가 로드될 때까지 대기합니다. 이는 Suspense를 사용하여 가져와야 하는 데이터를 포함하여 전체 페이지에 대한 정적 HTML을 생성하는 데 적합합니다. 콘텐츠가 로드되면서 스트리밍하려면 [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream)과 같은 스트리밍 서버 사이드 렌더링(SSR) API를 사용하세요.

`prerender` can be aborted and later either continued with `resumeAndPrerender` or resumed with `resume` to support partial pre-rendering.
부분 사전 렌더링을 지원하기 위해 `prerender`는 중단할 수 있으며, 이후 `resumeAndPrerender`로 이어서 진행하거나 `resume`으로 재개할 수 있습니다.

</Note>

Expand Down Expand Up @@ -313,7 +313,7 @@ async function renderToString() {

불완전한 자식을 가진 모든 Suspense 경계는 폴백 상태로 prelude에 포함됩니다.

This can be used for partial prerendering together with [`resume`](/reference/react-dom/server/resume) or [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender).
이 방식은 [`resume`](/reference/react-dom/server/resume) 또는 [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender)와 함께 부분 사전 렌더링에 사용할 수 있습니다.

## 문제 해결 {/*troubleshooting*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,11 @@ app.use('/', async (request, response) => {

#### 반환값 {/*returns*/}

`prerenderToNodeStream` returns a Promise:
- If rendering the is successful, the Promise will resolve to an object containing:
- `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
- `postponed`: a JSON-serializeable, opaque object that can be passed to [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) if `prerenderToNodeStream` did not finish. Otherwise `null` indicating that the `prelude` contains all the content and no resume is necessary.
- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)
`prerenderToNodeStream`은 Promise를 반환합니다.
- 렌더링에 성공하면 Promise는 다음을 포함한 객체로 resolve됩니다.
- `prelude`: HTML을 담은 [Node.js Stream](https://nodejs.org/api/stream.html)입니다. 이 스트림을 사용해 응답을 청크 단위로 전송하거나, 전체 스트림을 문자열로 읽을 수 있습니다.
- `postponed`: JSON으로 직렬화 가능한 불투명 객체입니다. `prerenderToNodeStream`이 완료되지 않은 경우 [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream)에 전달할 수 있습니다. 완료된 경우에는 `null`이며, 이는 `prelude`에 모든 콘텐츠가 포함되어 재개가 필요 없음을 의미합니다.
- 렌더링에 실패하면 Promise는 reject됩니다. [이 값을 사용해 fallback 셸을 출력하세요.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)

#### 주의 사항 {/*caveats*/}

Expand All @@ -78,7 +78,7 @@ app.use('/', async (request, response) => {

정적 `prerenderToNodeStream` API는 정적 서버 사이드 생성(SSG)에 사용합니다. `renderToString`과 달리, `prerenderToNodeStream`은 모든 데이터가 로드될 때까지 기다린 후에 성공합니다. 이는 Suspense를 사용해 가져와야 하는 데이터를 포함해, 전체 페이지의 정적 HTML을 생성하는 데 적합합니다. 콘텐츠가 로드되는 동안 스트리밍하려면, [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream)과 같은 스트리밍 서버 사이드 렌더링(SSR) API를 사용하세요.

`prerenderToNodeStream` can be aborted and resumed later with `resumeToPipeableStream` to support partial pre-rendering.
부분 사전 렌더링을 지원하기 위해 `prerenderToNodeStream`은 중단할 수 있으며, 이후 `resumeToPipeableStream`으로 재개할 수 있습니다.

</Note>

Expand Down Expand Up @@ -314,7 +314,7 @@ async function renderToString() {

불완전한 자식을 가진 모든 Suspense 경계는 풀백 상태로 Prelude에 포함됩니다.

This can be used for partial prerendering together with [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) or [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream).
이 방식은 [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) 또는 [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream)과 함께 부분 사전 렌더링에 사용할 수 있습니다.

## 문제 해결 {/*troubleshooting*/}

Expand Down
Loading