Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#76] docs: rendering 번역 #78

Merged
merged 2 commits into from
Aug 5, 2024
Merged

[#76] docs: rendering 번역 #78

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b8ebd52
[#76] docs: rendering 번역
grapefruit13 Jul 31, 2024
4eec1eb
[#76] typo: 줄바꿈 수정 및 마침표 표기
grapefruit13 Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 8 additions & 10 deletions pages/docs/pages/building-your-application/Rendering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,21 @@ title: Rendering
description: Learn the fundamentals of rendering in React and Next.js.
---

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

# Rendering

By default, Next.js **pre-renders** every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.
기본적으로 Next.js는 모든 페이지를 **사전 렌더링**합니다. 이는 클라이언트 사이드 JavaScript가 아닌 Next.js가 각 페이지의 HTML을 생성하는 것을 의미합니다. 사전 렌더링은 성능과 SEO(검색 엔진 최적화)를 개선할 수 있습니다.

Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive (this process is called [hydration](https://react.dev/reference/react-dom/client/hydrateRoot) in React).
생성된 각 HTML에는 해당 페이지에 필요한 최소한의 JavaScript 코드만 포함됩니다. 페이지가 브라우저에서 로드되면, JavaScript 코드가 실행되어 그 페이지를 완전히 인터렉티브하게 만듭니다. (이 과정을 React에서는 [하이드레이션](https://react.dev/reference/react-dom/client/hydrateRoot)이라고 부릅니다.)

### Pre-rendering

Next.js has two forms of pre-rendering: **Static Generation** and **Server-side Rendering**. The difference is in **when** it generates the HTML for a page.
Next.js는 **정적 생성**과 **서버 사이드 렌더링**이라는 두 가지 형태의 사전 렌더링을 지원합니다. 두 방식의 차이는 **언제** 페이지의 HTML이 생성되는가에 있습니다.

- Static Generation: The HTML is generated at **build time** and will be reused on each request.
- Server-side Rendering: The HTML is generated on **each request**.
- 정적 생성: HTML이 **빌드 시점**에 생성되며, 이후 모든 요청에서 재사용됩니다.
- 서버 사이드 렌더링: HTML이 **각 요청 시점**에 생성됩니다.

Importantly, Next.js lets you choose which pre-rendering form you'd like to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.
중요한 점은, Next.js가 각 페이지별로 사용할 사전 렌더링 방식을 선택할 수 있게 해준다는 것입니다. 대부분의 페이지에는 정적 생성을 사용하고, 특정 페이지에서는 서버 사이드 렌더링을 사용함으로써 "하이브리드" Next.js 앱을 만들 수 있습니다.

We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.
성능상의 이유로 서버 사이드 렌더링보다는 정적 생성 방식을 사용하는 것을 권장합니다. 정적으로 생성된 페이지는 추가 설정 없이 CDN에 의해 캐시될 수 있어 성능이 향상됩니다. 그러나 경우에 따라 서버 사이드 렌더링이 유일한 선택일 수 있습니다.

You can also use client-side data fetching along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by clientside JavaScript. To learn more, take a look at the [Data Fetching](/docs/pages/building-your-application/data-fetching/client-side) documentation.
또한, 정적 생성이나 서버 사이드 렌더링과 함께 클라이언트 사이드 데이터 페칭을 사용할 수도 있습니다. 이는 페이지의 일부가 클라이언트 JavaScript로 완전히 렌더링될 수도 있다는 것을 의미합니다. 자세한 내용은 [데이터 페칭](/docs/pages/building-your-application/data-fetching/client-side) 문서를 참고하세요.
Loading