From b8ebd5228ab43ebfbe20cc90a3ff3ce8a46d064f Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Thu, 1 Aug 2024 01:03:56 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[#76]=20docs:=20rendering=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../building-your-application/Rendering.mdx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/pages/docs/pages/building-your-application/Rendering.mdx b/pages/docs/pages/building-your-application/Rendering.mdx index b6eb504..de7079c 100644 --- a/pages/docs/pages/building-your-application/Rendering.mdx +++ b/pages/docs/pages/building-your-application/Rendering.mdx @@ -3,23 +3,20 @@ 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. - -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). +기본적으로 Next.js는 모든 페이지를 **사전 렌더링**합니다. 이는 클라이언트 사이드 JavaScript가 아닌 Next.js가 각 페이지의 HTML을 생성하는 것을 의미합니다. 사전 렌더링은 성능과 SEO(검색 엔진 최적화)를 개선할 수 있습니다. +생성된 각 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) 문서를 참고하세요. From 4eec1eb3a24e24155e4763ccae142cb092d64608 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Thu, 1 Aug 2024 01:07:07 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[#76]=20typo:=20=EC=A4=84=EB=B0=94=EA=BF=88?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=A7=88=EC=B9=A8=ED=91=9C?= =?UTF-8?q?=20=ED=91=9C=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/docs/pages/building-your-application/Rendering.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pages/docs/pages/building-your-application/Rendering.mdx b/pages/docs/pages/building-your-application/Rendering.mdx index de7079c..ba1ab45 100644 --- a/pages/docs/pages/building-your-application/Rendering.mdx +++ b/pages/docs/pages/building-your-application/Rendering.mdx @@ -6,6 +6,7 @@ description: Learn the fundamentals of rendering in React and Next.js. # Rendering 기본적으로 Next.js는 모든 페이지를 **사전 렌더링**합니다. 이는 클라이언트 사이드 JavaScript가 아닌 Next.js가 각 페이지의 HTML을 생성하는 것을 의미합니다. 사전 렌더링은 성능과 SEO(검색 엔진 최적화)를 개선할 수 있습니다. + 생성된 각 HTML에는 해당 페이지에 필요한 최소한의 JavaScript 코드만 포함됩니다. 페이지가 브라우저에서 로드되면, JavaScript 코드가 실행되어 그 페이지를 완전히 인터렉티브하게 만듭니다. (이 과정을 React에서는 [하이드레이션](https://react.dev/reference/react-dom/client/hydrateRoot)이라고 부릅니다.) ### Pre-rendering @@ -17,6 +18,6 @@ Next.js는 **정적 생성**과 **서버 사이드 렌더링**이라는 두 가 중요한 점은, Next.js가 각 페이지별로 사용할 사전 렌더링 방식을 선택할 수 있게 해준다는 것입니다. 대부분의 페이지에는 정적 생성을 사용하고, 특정 페이지에서는 서버 사이드 렌더링을 사용함으로써 "하이브리드" Next.js 앱을 만들 수 있습니다. -성능상의 이유로 서버 사이드 렌더링보다는 정적 생성 방식을 사용하는 것을 권장합니다. 정적으로 생성된 페이지는 추가 설정 없이 CDN에 의해 캐시될 수 있어 성능이 향상됩니다. 그러나 경우에 따라 서버 사이드 렌더링이 유일한 선택일 수 있습니다 +성능상의 이유로 서버 사이드 렌더링보다는 정적 생성 방식을 사용하는 것을 권장합니다. 정적으로 생성된 페이지는 추가 설정 없이 CDN에 의해 캐시될 수 있어 성능이 향상됩니다. 그러나 경우에 따라 서버 사이드 렌더링이 유일한 선택일 수 있습니다. 또한, 정적 생성이나 서버 사이드 렌더링과 함께 클라이언트 사이드 데이터 페칭을 사용할 수도 있습니다. 이는 페이지의 일부가 클라이언트 JavaScript로 완전히 렌더링될 수도 있다는 것을 의미합니다. 자세한 내용은 [데이터 페칭](/docs/pages/building-your-application/data-fetching/client-side) 문서를 참고하세요.