Skip to content

Commit

Permalink
[#77] docs: get-server-side-prop 번역 (#96) [skip ci]
Browse files Browse the repository at this point in the history 
* [#22] docs: server-side-rendering 번역

* [#46] docs: version-13 번역

* [#46] typo: 문서 내 Image 태그 백틱 추가

* [no-issue] typo: version-13 문서 내 오타 수정 (#77)

* [#77] docs: get-server-side-props 번역

* [#77] typo: 단어 중복 오타 수정
  • Loading branch information
@hansololiviakim
hansololiviakim authored Aug 5, 2024
1 parent e6bc67f commit 71a3eff
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 33 deletions.
62 changes: 30 additions & 32 deletions pages/docs/pages/api-reference/functions/get-server-side-props.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ title: getServerSideProps
description: API reference for `getServerSideProps`. Learn how to fetch data on each request with Next.js.
---

{/* TODO: 번역이 필요합니다. */}

# getServerSideProps

When exporting a function called `getServerSideProps` (Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`. This is useful if you want to fetch data that changes often, and have the page update to show the most current data.
페이지에서 `getServerSideProps` (서버 사이드 렌더링)이라는 함수를 내보내면, Next.js는 `getServerSideProps`에서 반환된 데이터를 사용해 각 요청마다 페이지를 사전 렌더링합니다. 이는 자주 변경되는 데이터를 가져오고, 페이지를 최신 데이터로 업데이트하려는 경우 유용합니다.

```tsx filename="pages/index.tsx" switcher
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
Expand All @@ -18,10 +16,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 }>

Expand All @@ -38,10 +36,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 } }
}

Expand All @@ -54,45 +52,45 @@ export default function Page({ repo }) {
}
```

You can import modules in top-level scope for use in `getServerSideProps`. Imports used will **not be bundled for the client-side**. This means you can write **server-side code directly in `getServerSideProps`**, including fetching data from your database.
`getServerSideProps`에서 사용하기 위해 상위 레벨 범위에서 모듈을 가져올 수 있습니다. 사용된 임포트는 **클라이언트 사이드에 번들되지 않습니다.** 이는 데이터베이스에서 데이터를 가져오는 것을 포함해 **`getServerSideProps` 내에서 서버 사이드 코드를 직접 작성할 수 있음을 의미합니다**.

## Context parameter

The `context` parameter is an object containing the following keys:
`context` 매개변수는 다음 키를 포함하는 객체입니다:

| Name | Description |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `params` | If this page uses a [dynamic route](/docs/pages/building-your-application/routing/dynamic-routes), `params` contains the route parameters. If the page name is `[id].js`, then `params` will look like `{ id: ... }`. |
| `req` | [The `HTTP` IncomingMessage object](https://nodejs.org/api/http.html#http_class_http_incomingmessage), with an additional `cookies` prop, which is an object with string keys mapping to string values of cookies. |
| `res` | [The `HTTP` response object](https://nodejs.org/api/http.html#http_class_http_serverresponse). |
| `query` | An object representing the query string, including dynamic route parameters. |
| `preview` | (Deprecated for `draftMode`) `preview` is `true` if the page is in the [Preview Mode](/docs/pages/building-your-application/configuring/preview-mode) and `false` otherwise. |
| `previewData` | (Deprecated for `draftMode`) The [preview](/docs/pages/building-your-application/configuring/preview-mode) data set by `setPreviewData`. |
| `draftMode` | `draftMode` is `true` if the page is in the [Draft Mode](/docs/pages/building-your-application/configuring/draft-mode) and `false` otherwise. |
| `resolvedUrl` | A normalized version of the request `URL` that strips the `_next/data` prefix for client transitions and includes original query values. |
| `locale` | Contains the active locale (if enabled). |
| `locales` | Contains all supported locales (if enabled). |
| `defaultLocale` | Contains the configured default locale (if enabled). |
| `params` | 이 페이지가 [동적 라우트](/docs/pages/building-your-application/routing/dynamic-routes)를 사용하는 경우, `params`에는 라우트 매개변수가 포함됩니다. 페이지 이름이 `[id].js`면, `params`는 `{ id: ... }`와 같이 표시됩니다. |
| `req` | 추가적인 `cookies` prop이 있는 [The HTTP IncomingMessage 객체](https://nodejs.org/api/http.html#http_class_http_incomingmessage)이며, 이는 문자열 값을 가진 쿠키의 문자열 키를 매핑하는 객체입니다. |
| `res` | [The `HTTP` response 객체](https://nodejs.org/api/http.html#http_class_http_serverresponse)입니다. |
| `query` | 동적 라우트 매개변수를 포함한 쿼리 문자열을 나타내는 객체입니다. |
| `preview` | (`draftMode`로 대체 예정) 페이지가 [미리보기 모드](/docs/pages/building-your-application/configuring/preview-mode)에 있는 경우 `preview`는 `true`이고, 그렇지 않으면 `false`입니다. |
| `previewData` | (`draftMode`로 대체 예정) `setPreviewData`에 의해 설정된 [미리보기](/docs/pages/building-your-application/configuring/preview-mode) 데이터입니다. |
| `draftMode` | 페이지가 [Draft Mode](/docs/pages/building-your-application/configuring/draft-mode)에 있는 경우 `draftMode`는 `true`이고, 그렇지 않으면 `false`입니다. |
| `resolvedUrl` | 클라이언트 전환을 위한 `_next/data` 접두사를 제거하고 원래 쿼리 값을 포함하는 요청 `URL`의 정규화된 버전입니다. |
| `locale` | 활성 로케일이 포함됩니다. (활성화된 경우) |
| `locales` | 지원되는 모든 로케일이 포함됩니다. (활성화된 경우) |
| `defaultLocale` | 설정된 기본 로케일이 포함됩니다. (활성화된 경우) |

## getServerSideProps return values

The `getServerSideProps` function should return an object with **any one of the following** properties:
`getServerSideProps` 함수는 **다음 속성 중 하나를 가진 객체**를 반환해야 합니다:

### `props`

The `props` object is a key-value pair, where each value is received by the page component. It should be a [serializable object](https://developer.mozilla.org/docs/Glossary/Serialization) so that any props passed, could be serialized with [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
`props` 객체는 페이지 컴포넌트가 받는 키-값 쌍입니다. 전달된 모든 props가 [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)로 직렬화될 수 있도록 [직렬화 가능한 객체](https://developer.mozilla.org/docs/Glossary/Serialization)여야 합니다.

```jsx
export async function getServerSideProps(context) {
return {
props: { message: `Next.js is awesome` }, // will be passed to the page component as props
props: { message: `Next.js is awesome` }, // 페이지 컴포넌트에 props로 전달됩니다.
}
}
```

### `notFound`

The `notFound` boolean allows the page to return a `404` status and [404 Page](/docs/pages/building-your-application/routing/custom-error#404-page). With `notFound: true`, the page will return a `404` even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author.
`notFound` 불리언 값은 페이지가 `404` 상태와 [404 Page](/docs/pages/building-your-application/routing/custom-error#404-page)를 반환하도록 합니다. `notFound: true`인 경우, 이전에 성공적으로 생성된 페이지가 있어도 페이지는 404를 반환합니다. 이는 사용자 생성 콘텐츠가 작성자에 의해 제거되는 경우와 같은 사용 사례를 지원하기 위함입니다.

```js
export async function getServerSideProps(context) {
Expand All @@ -106,14 +104,14 @@ export async function getServerSideProps(context) {
}

return {
props: { data }, // will be passed to the page component as props
props: { data }, // 페이지 컴포넌트에 props로 전달됩니다.
}
}
```

### `redirect`

The `redirect` object allows redirecting to internal and external resources. It should match the shape of `{ destination: string, permanent: boolean }`. In some rare cases, you might need to assign a custom status code for older `HTTP` clients to properly redirect. In these cases, you can use the `statusCode` property instead of the `permanent` property, but not both.
`redirect` 객체는 내부 및 외부 리소스로 리디렉션을 허용합니다. 이는 `{ destination: string, permanent: boolean }`의 형태와 일치해야 합니다. 드물게, 이전 `HTTP` 클라이언트가 제대로 리디렉션되도록 사용자 정의 상태 코드를 할당해야 할 수도 있습니다. 이러한 경우, `permanent` 속성 대신 `statusCode` 속성을 사용할 수 있지만, 둘 다 사용할 수는 없습니다.

```js
export async function getServerSideProps(context) {
Expand All @@ -130,15 +128,15 @@ export async function getServerSideProps(context) {
}

return {
props: {}, // will be passed to the page component as props
props: {}, // 페이지 컴포넌트에 props로 전달됩니다.
}
}
```

## Version History

| Version | Changes |
| --------- | ----------------------------------------------------------------------------------------------------------- |
| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching) is now stable with simplified data fetching |
| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added. |
| `v9.3.0` | `getServerSideProps` introduced. |
| Version | Changes |
| --------- | -------------------------------------------------------------------------------------------------------------- |
| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching)가 안정화되었고, 단순화된 데이터 페칭을 지원합니다. |
| `v10.0.0` | `locale`, `locales`, `defaultLocale`, 및 `notFound` 옵션이 추가되었습니다. |
| `v9.3.0` | `getServerSideProps`가 도입되었습니다. |
2 changes: 1 addition & 1 deletion pages/docs/pages/building-your-application/upgrading/version-13.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Next.js 12는 임시 import인 `next/future/image`로 이미지 컴포넌트에

Next.js 13부터 이러한 새로운 동작은 `next/image`의 기본 동작이 되었습니다.

새로은 Image 컴포넌트로 마이그레이션하는 데 도움이 되는 두 가지 codemod가 있습니다:
새로운 Image 컴포넌트로 마이그레이션하는 데 도움이 되는 두 가지 codemod가 있습니다:

- [next-image-to-legacy-image](/docs/pages/building-your-application/upgrading/codemods#next-image-to-legacy-image): 이 codemod는 `next/image` import를 `next/legacy/image`로 안전하게 자동으로 이름을 변경하여 Next.js 12와 동일한 동작을 유지합니다. Next.js 13으로 빠르게 자동으로 업데이트를 하려면 이 codemod를 실행하는 것이 좋습니다.

Expand Down

0 comments on commit 71a3eff

Please sign in to comment.