diff --git a/src/content/reference/react-dom/static/resumeAndPrerender.md b/src/content/reference/react-dom/static/resumeAndPrerender.md index a4de84389..6ec531e4d 100644 --- a/src/content/reference/react-dom/static/resumeAndPrerender.md +++ b/src/content/reference/react-dom/static/resumeAndPrerender.md @@ -4,10 +4,10 @@ title: resumeAndPrerender -`resumeAndPrerender` continues a prerendered React tree to a static HTML string using a [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). +`resumeAndPrerender`는 사전 렌더링된 React 트리를 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)을 사용해 정적 HTML 문자열로 이어서 렌더링합니다. ```js -const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, options?) +const {prelude, postponed} = await resumeAndPrerender(reactNode, postponedState, options?) ``` @@ -16,17 +16,17 @@ const { prelude,postpone } = await resumeAndPrerender(reactNode, postponedState, -This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) instead. +이 API는 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)에 의존합니다. Node.js에서는 [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream)을 대신 사용하세요. --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `resumeAndPrerender(reactNode, postponedState, options?)` {/*resumeandprerender*/} -Call `resumeAndPrerender` to continue a prerendered React tree to a static HTML string. +`resumeAndPrerender`를 호출해 사전 렌더링된 React 트리를 정적 HTML 문자열로 이어서 렌더링합니다. ```js import { resumeAndPrerender } from 'react-dom/static'; @@ -43,45 +43,45 @@ async function handler(request, response) { } ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +클라이언트에서 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 호출해 서버에서 생성된 HTML을 상호작용할 수 있도록 만듭니다. -[See more examples below.](#usage) +[아래에서 더 많은 예시를 확인하세요.](#usage) -#### Parameters {/*parameters*/} +#### 매개변수 {/*parameters*/} -* `reactNode`: The React node you called `prerender` (or a previous `resumeAndPrerender`) with. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. -* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3). -* `options`**(선택사항)**: An object with streaming options. - * `signal`**(선택사항)**: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. - * `onError`**(선택사항)**: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. +* `reactNode`: `prerender` 또는 이전 `resumeAndPrerender`를 호출할 때 전달한 React 노드입니다. 예를 들어 ``과 같은 JSX 엘리먼트입니다. 전체 문서를 나타낼 것으로 예상되므로 `App` 컴포넌트는 `` 태그를 렌더링해야 합니다. +* `postponedState`: [prerender API](/reference/react-dom/static/index)에서 반환된 불투명한 `postpone` 객체로, 저장해 둔 위치(예: Redis, 파일, S3)에서 불러옵니다. +* `options`**(선택사항)**: 스트리밍 옵션을 지정할 수 있는 객체입니다. + * `signal`**(선택사항)**: [서버 렌더링을 중단](/reference/react-dom/server/renderToReadableStream#aborting-server-rendering)하고 나머지를 클라이언트에서 렌더링할 수 있게 하는 [중단 신호](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)입니다. + * `onError`**(선택사항)**: 서버 오류가 발생할 때마다, [복구 가능](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-outside-the-shell) 또는 [불가능](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) 여부와 관계없이 호출되는 콜백입니다. 기본적으로 `console.error`만 호출합니다. [충돌 보고를 기록](/reference/react-dom/server/renderToReadableStream#logging-crashes-on-the-server)하도록 재정의하는 경우에도 반드시 `console.error`를 호출해야 합니다. -#### Returns {/*returns*/} +#### 반환값 {/*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`: an JSON-serializeable, opaque object that can be passed to [`resume`](/reference/react-dom/server/resume) or [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender) if `prerender` is aborted. -- 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) +`resumeAndPrerender`는 Promise를 반환합니다. +- 렌더링에 성공하면 Promise는 다음을 포함한 객체로 resolve됩니다. + - `prelude`: HTML을 담은 [Web Stream](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)입니다. 이 스트림을 사용해 응답을 청크 단위로 전송하거나, 전체 스트림을 문자열로 읽을 수 있습니다. + - `postponed`: JSON으로 직렬화 가능한 불투명 객체입니다. `resumeAndPrerender`가 중단된 경우 [`resume`](/reference/react-dom/server/resume) 또는 [`resumeAndPrerender`](/reference/react-dom/static/resumeAndPrerender)에 전달할 수 있습니다. +- 렌더링에 실패하면 Promise는 reject됩니다. [이 값을 사용해 fallback 셸을 출력하세요.](/reference/react-dom/server/renderToReadableStream#recovering-from-errors-inside-the-shell) -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. +사전 렌더링 시 `nonce` 옵션은 사용할 수 없습니다. Nonce는 요청마다 고유해야 하며 [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)로 애플리케이션을 보호할 때 Nonce 값을 사전 렌더링 결과에 포함하는 것은 부적절하고 안전하지 않습니다. -### When should I use `resumeAndPrerender`? {/*when-to-use-prerender*/} +### `resumeAndPrerender`는 언제 사용해야 하나요? {/*when-to-use-prerender*/} -The static `resumeAndPrerender` API is used for static server-side generation (SSG). Unlike `renderToString`, `resumeAndPrerender` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). +정적 `resumeAndPrerender` API는 정적 사이트 생성SSG, Static Site Generation에 사용됩니다. `renderToString`과 달리 `resumeAndPrerender`는 모든 데이터가 로드될 때까지 기다린 후에 resolve됩니다. 이는 Suspense를 사용해 가져와야 하는 데이터를 포함해 전체 페이지의 정적 HTML을 생성하는 데 적합합니다. 콘텐츠가 로드되는 동안 스트리밍하려면 [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream)과 같은 스트리밍 서버 사이드 렌더링(SSR) API를 사용하세요. -`resumeAndPrerender` can be aborted and later either continued with another `resumeAndPrerender` or resumed with `resume` to support partial pre-rendering. +부분 사전 렌더링을 지원하기 위해 `resumeAndPrerender`는 중단할 수 있으며, 이후 다른 `resumeAndPrerender`로 이어서 진행하거나 `resume`으로 재개할 수 있습니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Further reading {/*further-reading*/} +### 추가로 읽어보기 {/*further-reading*/} -`resumeAndPrerender` behaves similarly to [`prerender`](/reference/react-dom/static/prerender) but can be used to continue a previously started prerendering process that was aborted. -For more information about resuming a prerendered tree, see the [resume documentation](/reference/react-dom/server/resume#resuming-a-prerender). +`resumeAndPrerender`는 [`prerender`](/reference/react-dom/static/prerender)와 비슷하게 동작하지만, 이전에 시작했다가 중단된 사전 렌더링 과정을 이어서 진행하는 데 사용할 수 있습니다. +사전 렌더링된 트리 재개에 대한 자세한 내용은 [resume 문서](/reference/react-dom/server/resume#resuming-a-prerender)를 확인하세요. diff --git a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md index 0a3642eb1..773bc54ea 100644 --- a/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md +++ b/src/content/reference/react-dom/static/resumeAndPrerenderToNodeStream.md @@ -4,7 +4,7 @@ title: resumeAndPrerenderToNodeStream -`resumeAndPrerenderToNodeStream` continues a prerendered React tree to a static HTML string using a a [Node.js Stream.](https://nodejs.org/api/stream.html). +`resumeAndPrerenderToNodeStream`은 사전 렌더링된 React 트리를 [Node.js Stream](https://nodejs.org/api/stream.html)을 사용해 정적 HTML 문자열로 이어서 렌더링합니다. ```js const {prelude, postponed} = await resumeAndPrerenderToNodeStream(reactNode, postponedState, options?) @@ -16,17 +16,17 @@ const {prelude, postponed} = await resumeAndPrerenderToNodeStream(reactNode, pos -This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`prerender`](/reference/react-dom/static/prerender) instead. +이 API는 Node.js 전용입니다. Deno나 최신 엣지 런타임처럼 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API)를 지원하는 환경에서는 [`prerender`](/reference/react-dom/static/prerender)를 사용해야 합니다. --- -## Reference {/*reference*/} +## 레퍼런스 {/*reference*/} ### `resumeAndPrerenderToNodeStream(reactNode, postponedState, options?)` {/*resumeandprerendertolnodestream*/} -Call `resumeAndPrerenderToNodeStream` to continue a prerendered React tree to a static HTML string. +`resumeAndPrerenderToNodeStream`을 호출해 사전 렌더링된 React 트리를 정적 HTML 문자열로 이어서 렌더링합니다. ```js import { resumeAndPrerenderToNodeStream } from 'react-dom/static'; @@ -39,46 +39,45 @@ async function handler(request, writable) { } ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +클라이언트에서 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)를 호출해 서버에서 생성된 HTML을 상호작용할 수 있도록 만듭니다. -[See more examples below.](#usage) +[아래에서 더 많은 예시를 확인하세요.](#usage) -#### Parameters {/*parameters*/} +#### 매개변수 {/*parameters*/} -* `reactNode`: The React node you called `prerender` (or a previous `resumeAndPrerenderToNodeStream`) with. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. -* `postponedState`: The opaque `postpone` object returned from a [prerender API](/reference/react-dom/static/index), loaded from wherever you stored it (e.g. redis, a file, or S3). -* `options`**(선택사항)**: An object with streaming options. - * `signal`**(선택사항)**: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort server rendering](#aborting-server-rendering) and render the rest on the client. - * `onError`**(선택사항)**: A callback that fires whenever there is a server error, whether [recoverable](#recovering-from-errors-outside-the-shell) or [not.](#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](#logging-crashes-on-the-server) make sure that you still call `console.error`. +* `reactNode`: `prerender` 또는 이전 `resumeAndPrerenderToNodeStream`을 호출할 때 전달한 React 노드입니다. 예를 들어 ``과 같은 JSX 엘리먼트입니다. 전체 문서를 나타낼 것으로 예상되므로 `App` 컴포넌트는 `` 태그를 렌더링해야 합니다. +* `postponedState`: [prerender API](/reference/react-dom/static/index)에서 반환된 불투명한 `postpone` 객체로, 저장해 둔 위치(예: Redis, 파일, S3)에서 불러옵니다. +* `options`**(선택사항)**: 스트리밍 옵션을 지정할 수 있는 객체입니다. + * `signal`**(선택사항)**: [서버 렌더링을 중단](/reference/react-dom/server/renderToPipeableStream#aborting-server-rendering)하고 나머지를 클라이언트에서 렌더링할 수 있게 하는 [중단 신호](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)입니다. + * `onError`**(선택사항)**: 서버 오류가 발생할 때마다, [복구 가능](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) 또는 [불가능](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) 여부와 관계없이 호출되는 콜백입니다. 기본적으로 `console.error`만 호출합니다. [충돌 보고를 기록](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server)하도록 재정의하는 경우에도 반드시 `console.error`를 호출해야 합니다. -#### Returns {/*returns*/} +#### 반환값 {/*returns*/} -`resumeAndPrerenderToNodeStream` 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`: an JSON-serializeable, opaque object that can be passed to [`resumeToNodeStream`](/reference/react-dom/server/resume) or [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream) if `resumeAndPrerenderToNodeStream` is aborted. -- 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) +`resumeAndPrerenderToNodeStream`은 Promise를 반환합니다. +- 렌더링에 성공하면 Promise는 다음을 포함한 객체로 resolve됩니다. + - `prelude`: HTML을 담은 [Node.js Stream](https://nodejs.org/api/stream.html)입니다. 이 스트림을 사용해 응답을 청크 단위로 전송하거나, 전체 스트림을 문자열로 읽을 수 있습니다. + - `postponed`: JSON으로 직렬화 가능한 불투명 객체입니다. `resumeAndPrerenderToNodeStream`이 중단된 경우 [`resumeToPipeableStream`](/reference/react-dom/server/resumeToPipeableStream) 또는 [`resumeAndPrerenderToNodeStream`](/reference/react-dom/static/resumeAndPrerenderToNodeStream)에 전달할 수 있습니다. +- 렌더링에 실패하면 Promise는 reject됩니다. [이 값을 사용해 fallback 셸을 출력하세요.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) -#### Caveats {/*caveats*/} +#### 주의 사항 {/*caveats*/} -`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself. +사전 렌더링 시 `nonce` 옵션은 사용할 수 없습니다. Nonce는 요청마다 고유해야 하며 [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP)로 애플리케이션을 보호할 때 Nonce 값을 사전 렌더링 결과에 포함하는 것은 부적절하고 안전하지 않습니다. -### When should I use `resumeAndPrerenderToNodeStream`? {/*when-to-use-prerender*/} +### `resumeAndPrerenderToNodeStream`은 언제 사용해야 하나요? {/*when-to-use-prerender*/} -The static `resumeAndPrerenderToNodeStream` API is used for static server-side generation (SSG). Unlike `renderToString`, `resumeAndPrerenderToNodeStream` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream). +정적 `resumeAndPrerenderToNodeStream` API는 정적 서버 사이드 생성(SSG)에 사용합니다. `renderToString`과 달리 `resumeAndPrerenderToNodeStream`은 모든 데이터가 로드될 때까지 기다린 후에 resolve됩니다. 이는 Suspense를 사용해 가져와야 하는 데이터를 포함해 전체 페이지의 정적 HTML을 생성하는 데 적합합니다. 콘텐츠가 로드되는 동안 스트리밍하려면 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)과 같은 스트리밍 서버 사이드 렌더링(SSR) API를 사용하세요. -`resumeAndPrerenderToNodeStream` can be aborted and later either continued with another `resumeAndPrerenderToNodeStream` or resumed with `resume` to support partial pre-rendering. +부분 사전 렌더링을 지원하기 위해 `resumeAndPrerenderToNodeStream`은 중단할 수 있으며, 이후 다른 `resumeAndPrerenderToNodeStream`으로 이어서 진행하거나 `resumeToPipeableStream`으로 재개할 수 있습니다. --- -## Usage {/*usage*/} +## 사용법 {/*usage*/} -### Further reading {/*further-reading*/} - -`resumeAndPrerenderToNodeStream` behaves similarly to [`prerender`](/reference/react-dom/static/prerender) but can be used to continue a previously started prerendering process that was aborted. -For more information about resuming a prerendered tree, see the [resume documentation](/reference/react-dom/server/resume#resuming-a-prerender). +### 추가로 읽어보기 {/*further-reading*/} +`resumeAndPrerenderToNodeStream`은 [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream)과 비슷하게 동작하지만, 이전에 시작했다가 중단된 사전 렌더링 과정을 이어서 진행하는 데 사용할 수 있습니다. +사전 렌더링된 트리 재개에 대한 자세한 내용은 [resumeToPipeableStream 문서](/reference/react-dom/server/resumeToPipeableStream)를 확인하세요.