diff --git a/pages/docs/pages/api-reference/functions/get-initial-props.mdx b/pages/docs/pages/api-reference/functions/get-initial-props.mdx index 492cfd3..4252ab2 100644 --- a/pages/docs/pages/api-reference/functions/get-initial-props.mdx +++ b/pages/docs/pages/api-reference/functions/get-initial-props.mdx @@ -3,13 +3,11 @@ title: getInitialProps description: Fetch dynamic data on the server for your React component with getInitialProps. --- -{/* TODO: 번역이 필요합니다. */} - # getInitialProps -> **Good to know**: `getInitialProps` is a legacy API. We recommend using [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) or [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props) instead. +> **알아두기** : `getInitialProps`는 레거시 API입니다. 대신 [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) 또는 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)를 사용하는 것이 좋습니다. -`getInitialProps` is an `async` function that can be added to the default exported React component for the page. It will run on both the server-side and again on the client-side during page transitions. The result of the function will be forwarded to the React component as `props`. +`getInitialProps`는 페이지에 기본적으로 내보내지는 React 컴포넌트에 추가할 수 있는 `비동기` 함수입니다. 이 함수는 서버 사이드와 클라이언트 사이드의 페이지 전환 시 모두 실행됩니다. 함수의 결과는 React 컴포넌트에 `props`로 전달됩니다. ```tsx filename="pages/index.tsx" switcher import { NextPageContext } from 'next' @@ -37,26 +35,26 @@ export default function Page({ stars }) { } ``` -> **Good to know**: +> **알아두기**: > -> - Data returned from `getInitialProps` is serialized when server rendering. Ensure the returned object from `getInitialProps` is a plain `Object`, and not using `Date`, `Map` or `Set`. -> - For the initial page load, `getInitialProps` will run on the server only. `getInitialProps` will then also run on the client when navigating to a different route with the [`next/link`](/docs/pages/api-reference/components/link) component or by using [`next/router`](/docs/pages/api-reference/functions/use-router). -> - If `getInitialProps` is used in a custom `_app.js`, and the page being navigated to is using `getServerSideProps`, then `getInitialProps` will also run on the server. +> - `getInitialProps`에서 반환된 데이터는 서버 렌더링 시 직렬화됩니다. `getInitialProps`에서 반환하는 객체는 단순한 `Object`여야 하며, `Date`, `Map`, `Set` 같은 객체를 사용하지 않아야 합니다. +> - 초기 페이지 로드 시, `getInitialProps`는 서버에서만 실행됩니다. 이후에는 [`next/link`](/docs/pages/api-reference/components/link) 컴포넌트나 [`next/router`](/docs/pages/api-reference/functions/use-router)를 사용하여 다른 경로로 이동할 때 클라이언트에서도 `getInitialProps`가 실행됩니다. +> - `getInitialProps`가 사용자 정의 `_app.js`에서 사용되며, 이동하려는 페이지가 `getServerSideProps`를 사용하는 경우, `getInitialProps`는 서버에서도 실행됩니다. ## Context Object -`getInitialProps` receives a single argument called `context`, which is an object with the following properties: +`getInitialProps`는 `context`라는 단일 인자를 받습니다. 이 `context`는 다음과 같은 속성을 가진 객체입니다: -| Name | Description | -| ---------- | ----------------------------------------------------------------------------------------------------- | -| `pathname` | Current route, the path of the page in `/pages` | -| `query` | Query string of the URL, parsed as an object | -| `asPath` | `String` of the actual path (including the query) shown in the browser | -| `req` | [HTTP request object](https://nodejs.org/api/http.html#http_class_http_incomingmessage) (server only) | -| `res` | [HTTP response object](https://nodejs.org/api/http.html#http_class_http_serverresponse) (server only) | -| `err` | Error object if any error is encountered during the rendering | +| 이름 | 설명 | +| ---------- | ---------------------------------------------------------------------------------------------- | +| `pathname` | 현재 경로, `/pages` 디렉토리 내의 페이지 경로 | +| `query` | URL의 쿼리 문자열을 객체로 파싱한 값 | +| `asPath` | 브라우저에 표시되는 실제 경로(query 포함)의 `문자열` | +| `req` | [HTTP 요청 객체](https://nodejs.org/api/http.html#http_class_http_incomingmessage) (서버 전용) | +| `res` | [HTTP 응답 객체](https://nodejs.org/api/http.html#http_class_http_serverresponse) (서버 전용) | +| `err` | 렌더링 중 오류가 발생할 경우 오류 객체 | ## Caveats -- `getInitialProps` can only be used in `pages/` top level files, and not in nested components. To have nested data fetching at the component level, consider exploring the [App Router](/docs/app/building-your-application/data-fetching). -- Regardless of whether your route is static or dynamic, any data returned from `getInitialProps` as `props` will be able to be examined on the client-side in the initial HTML. This is to allow the page to be [hydrated](https://react.dev/reference/react-dom/hydrate) correctly. Make sure that you don't pass any sensitive information that shouldn't be available on the client in `props`. +- `getInitialProps`는 `pages/` 디렉토리의 최상위 파일에서만 사용할 수 있으며, 중첩된 컴포넌트에서는 사용할 수 없습니다. 컴포넌트 수준에서 중첩된 데이터 가져오기를 하려면 [App Router](/docs/app/building-your-application/data-fetching)를 참고해 보세요. +- 경로가 정적이든 동적이든 상관없이, `getInitialProps`에서 반환된 데이터는 초기 HTML에서 클라이언트 단에서 확인할 수 있습니다. 이는 페이지가 [hydrated](https://react.dev/reference/react-dom/hydrate)될 수 있도록 하기 위해서입니다. 클라이언트에서 접근하면 안 되는 민감한 정보는 `props`에 포함되지 않도록 주의하세요.