[#29] docs: get-server-side-props 번역 (#51)

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)이 사용 사례에 더 적합한지 확인하는 것을 권장합니다.