diff --git a/pages/docs/pages/building-your-application/data-fetching/get-server-side-props.mdx b/pages/docs/pages/building-your-application/data-fetching/get-server-side-props.mdx index c9d596b..59254e6 100644 --- a/pages/docs/pages/building-your-application/data-fetching/get-server-side-props.mdx +++ b/pages/docs/pages/building-your-application/data-fetching/get-server-side-props.mdx @@ -3,15 +3,13 @@ title: getServerSideProps description: Fetch data on each request with `getServerSideProps`. --- -{/* TODO: 번역이 필요합니다. */} - # getServerSideProps -`getServerSideProps` is a Next.js function that can be used to fetch data and render the contents of a page at request time. +`getServerSideProps`는 요청 시 데이터 가져오기와 페이지 콘텐츠를 렌더링하는 데 사용할 수 있는 Next.js 함수입니다. ## Example -You can use `getServerSideProps` by exporting it from a Page Component. The example below shows how you can fetch data from a 3rd party API in `getServerSideProps`, and pass the data to the page as props: +`getServerSideProps`를 Page Component에서 export하여 사용할 수 있습니다. 아래 예제는 `getServerSideProps`에서 서드파티 API로부터 데이터를 가져오고, 그 데이터를 props로 페이지에 전달하는 방법을 보여줍니다: ```tsx filename="pages/index.tsx" switcher import type { InferGetServerSidePropsType, GetServerSideProps } from 'next' @@ -22,10 +20,10 @@ type Repo = { } export const getServerSideProps = (async () => { - // Fetch data from external API + // 외부 API에서 데이터 가져오기 const res = await fetch('https://api.github.com/repos/vercel/next.js') const repo: Repo = await res.json() - // Pass data to the page via props + // props를 통해 페이지에 데이터 전달 return { props: { repo } } }) satisfies GetServerSideProps<{ repo: Repo }> @@ -42,10 +40,10 @@ export default function Page({ ```jsx filename="pages/index.js" switcher export async function getServerSideProps() { - // Fetch data from external API + // 외부 API에서 데이터 가져오기 const res = await fetch('https://api.github.com/repos/vercel/next.js') const repo = await res.json() - // Pass data to the page via props + // props를 통해 페이지에 데이터 전달 return { props: { repo } } } @@ -60,43 +58,41 @@ export default function Page({ repo }) { ## When should I use `getServerSideProps`? -You should use `getServerSideProps` if you need to render a page that relies on personalized user data, or information that can only be known at request time. For example, `authorization` headers or a geolocation. +개인화된 사용자 데이터나 요청 시에만 알 수 있는 정보에 의존하는 페이지를 렌더링해야 하는 경우 `getServerSideProps`를 사용해야 합니다. 예를 들어, `authorization` 헤더나 지리적 위치 정보가 있습니다. -If you do not need to fetch the data at request time, or would prefer to cache the data and pre-rendered HTML, we recommend using [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props). +요청 시 데이터 가져오기가 필요 없거나, 데이터를 캐시하고 미리 렌더된 HTML을 선호하는 경우 [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) 사용을 권장합니다. ## Behavior -- `getServerSideProps` runs on the server. -- `getServerSideProps` can only be exported from a **page**. -- `getServerSideProps` returns JSON. -- When a user visits a page, `getServerSideProps` will be used to fetch data at request time, and the data is used to render the initial HTML of the page. -- `props` passed to the page component can be viewed on the client as part of 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`. -- When a user visits the page through [`next/link`](/docs/pages/api-reference/components/link) or [`next/router`](/docs/pages/api-reference/functions/use-router), Next.js sends an API request to the server, which runs `getServerSideProps`. -- You do not have to call a Next.js [API Route](/docs/pages/building-your-application/routing/api-routes) to fetch data when using `getServerSideProps` since the function runs on the server. Instead, you can call a CMS, database, or other third-party APIs directly from inside `getServerSideProps`. +- `getServerSideProps`는 서버에서 실행됩니다. +- `getServerSideProps`는 **페이지**에서만 export할 수 있습니다. +- `getServerSideProps`는 JSON을 반환합니다. +- 사용자가 페이지를 방문할 때 `getServerSideProps`가 데이터를 요청 시 가져와서 페이지의 초기 HTML을 렌더링하는 데 사용됩니다. +- 페이지 컴포넌트에 전달된 `props`는 초기 HTML의 일부로 클라이언트에서 볼 수 있습니다. 이는 페이지가 [hydrated](https://react.dev/reference/react-dom/hydrate) 될 수 있도록 하기 위함입니다. `props`에 클라이언트에서 볼 수 없어야 하는 민감한 정보를 전달하지 않도록 주의하세요. +- 사용자가 [`next/link`](/docs/pages/api-reference/components/link) 또는 [`next/router`](/docs/pages/api-reference/functions/use-router)를 통해 페이지를 방문하면 Next.js가 서버에 API 요청을 보내 `getServerSideProps`를 실행합니다. +- `getServerSideProps`를 사용할 때 데이터를 가져오기 위해 Next.js [API Route](/docs/pages/building-your-application/routing/api-routes)를 호출할 필요가 없습니다. 대신, `getServerSideProps` 내부에서 CMS, 데이터베이스 또는 다른 서드파티 API를 직접 호출할 수 있습니다. -> **Good to know:** +> **알아두면 좋은 점:** > -> - See [`getServerSideProps` API reference](/docs/pages/api-reference/functions/get-server-side-props) for parameters and props that can be used with `getServerSideProps`. -> - You can use the [next-code-elimination tool](https://next-code-elimination.vercel.app/) to verify what Next.js eliminates from the client-side bundle. +> - `getServerSideProps`에서 사용할 수 있는 매개변수와 props에 대한 자세한 내용은 [`getServerSideProps` API reference](/docs/pages/api-reference/functions/get-server-side-props)를 참조하세요. +> - [next-code-elimination tool](https://next-code-elimination.vercel.app/)을 사용하여 Next.js가 클라이언트 측 번들에서 제거하는 내용을 확인할 수 있습니다. ## Error Handling -If an error is thrown inside `getServerSideProps`, it will show the `pages/500.js` file. Check out the documentation for [500 page](/docs/pages/building-your-application/routing/custom-error#500-page) to learn more on how to create it. During development, this file will not be used and the development error overlay will be shown instead. +`getServerSideProps` 내에서 오류가 발생하면 `pages/500.js` 파일이 표시됩니다. 500 페이지를 만드는 방법에 대해 자세히 알아보려면 [500 page](/docs/pages/building-your-application/routing/custom-error#500-page) 문서를 확인하세요. 개발 중에는 이 파일이 사용되지 않고 개발 오류 오버레이가 대신 표시됩니다. ## Edge Cases ### Caching with Server-Side Rendering (SSR) -You can use caching headers (`Cache-Control`) inside `getServerSideProps` to cache dynamic responses. For example, using [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/). +`getServerSideProps` 내부에서 캐싱 헤더(`Cache-Control`)를 사용하여 동적 응답을 캐시할 수 있습니다. 예를 들어, [`stale-while-revalidate`](https://web.dev/stale-while-revalidate/)를 사용할 수 있습니다. ```jsx -// This value is considered fresh for ten seconds (s-maxage=10). -// If a request is repeated within the next 10 seconds, the previously -// cached value will still be fresh. If the request is repeated before 59 seconds, -// the cached value will be stale but still render (stale-while-revalidate=59). -// -// In the background, a revalidation request will be made to populate the cache -// with a fresh value. If you refresh the page, you will see the new value. +// 이 값은 10초 동안 신선한 것으로 간주됩니다 (s-maxage=10). +// 다음 10초 내에 요청이 반복되면 이전에 캐시된 값이 여전히 신선합니다. +// 요청이 59초 전에 반복되면 캐시된 값이 오래되었지만 여전히 렌더링됩니다 (stale-while-revalidate=59). +// 백그라운드에서 재검증 요청이 이루어져 새 값으로 캐시를 채웁니다. +// 페이지를 새로 고치면 새 값을 볼 수 있습니다. export async function getServerSideProps({ req, res }) { res.setHeader( 'Cache-Control', @@ -109,4 +105,4 @@ export async function getServerSideProps({ req, res }) { } ``` -However, before reaching for `cache-control`, we recommend seeing if [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) with [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) is a better fit for your use case. +그러나 `cache-control`을 사용하기 전에 [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)와 [ISR](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)이 사용 사례에 더 적합한지 확인하는 것을 권장합니다.