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 d267468..4252ab2 100644 --- a/pages/docs/pages/api-reference/functions/get-initial-props.mdx +++ b/pages/docs/pages/api-reference/functions/get-initial-props.mdx @@ -5,7 +5,7 @@ description: Fetch dynamic data on the server for your React component with getI # getInitialProps -> **알아두기** : `getInitialProps`는 레거시 API입니다. 대신 `getStaticProps` 또는 `getServerSideProps`를 사용하는 것이 좋습니다. +> **알아두기** : `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`는 페이지에 기본적으로 내보내지는 React 컴포넌트에 추가할 수 있는 `비동기` 함수입니다. 이 함수는 서버 사이드와 클라이언트 사이드의 페이지 전환 시 모두 실행됩니다. 함수의 결과는 React 컴포넌트에 `props`로 전달됩니다. @@ -38,10 +38,10 @@ export default function Page({ stars }) { > **알아두기**: > > - `getInitialProps`에서 반환된 데이터는 서버 렌더링 시 직렬화됩니다. `getInitialProps`에서 반환하는 객체는 단순한 `Object`여야 하며, `Date`, `Map`, `Set` 같은 객체를 사용하지 않아야 합니다. -> - 초기 페이지 로드 시, `getInitialProps`는 서버에서만 실행됩니다. 이후에는 `next/link` 컴포넌트나 `next/router`를 사용하여 다른 경로로 이동할 때 클라이언트에서도 `getInitialProps`가 실행됩니다. +> - 초기 페이지 로드 시, `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 객체 +## Context Object `getInitialProps`는 `context`라는 단일 인자를 받습니다. 이 `context`는 다음과 같은 속성을 가진 객체입니다: @@ -54,8 +54,7 @@ export default function Page({ stars }) { | `res` | [HTTP 응답 객체](https://nodejs.org/api/http.html#http_class_http_serverresponse) (서버 전용) | | `err` | 렌더링 중 오류가 발생할 경우 오류 객체 | - -## 주의사항 +## Caveats - `getInitialProps`는 `pages/` 디렉토리의 최상위 파일에서만 사용할 수 있으며, 중첩된 컴포넌트에서는 사용할 수 없습니다. 컴포넌트 수준에서 중첩된 데이터 가져오기를 하려면 [App Router](/docs/app/building-your-application/data-fetching)를 참고해 보세요. - 경로가 정적이든 동적이든 상관없이, `getInitialProps`에서 반환된 데이터는 초기 HTML에서 클라이언트 단에서 확인할 수 있습니다. 이는 페이지가 [hydrated](https://react.dev/reference/react-dom/hydrate)될 수 있도록 하기 위해서입니다. 클라이언트에서 접근하면 안 되는 민감한 정보는 `props`에 포함되지 않도록 주의하세요.