[#20] docs: client-side-rendering 번역

pages/docs/pages/building-your-application/rendering/client-side-rendering.mdx

@@ -14,16 +14,16 @@ related:
 
 # Client-side Rendering (CSR)
 
-In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.
+React를 사용한 클라이언트 사이드 렌더링 (CSR)에서는 브라우저가 최소한의 HTML 페이지와 페이지에 필요한 자바스크립트를 다운로드 합니다. 그 후 자바스크립트는 DOM을 업데이트하고 페이지를 렌더링하는 데 사용됩니다. 애플리케이션이 처음 로드될 때, 사용자가 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있습니다. 이는 모든 자바스크립트가 다운로드, 파싱 및 실행될 때까지 페이지가 완전하게 렌더링 되지 않기 때문입니다.
 
-After the page has been loaded for the first time, navigating to other pages on the same website is typically faster, as only necessary data needs to be fetched, and JavaScript can re-render parts of the page without requiring a full page refresh.
+페이지가 처음 로드된 후, 같은 웹사이트에서 다른 페이지로 이동할 때는 일반적으로 더 빠릅니다. 필요한 데이터만 가져오면 되고, 자바스크립트가 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 다시 렌더링할 수 있기 때문입니다.
 
-In Next.js, there are two ways you can implement client-side rendering:
+Next.js에서는 클라이언트 사이드 렌더링을 구현할 수 있는 두 가지 방법이 있습니다.
 
-1. Using React's `useEffect()` hook inside your pages instead of the server-side rendering methods ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) and [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)).
-2. Using a data fetching library like [SWR](https://swr.vercel.app/) or [TanStack Query](https://tanstack.com/query/latest/) to fetch data on the client (recommended).
+1. 서버 사이드 렌더링 메서드 ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)와 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)) 대신에 페이지 내부에서 리액트의 `useEffect()` 훅을 사용합니다.
+2. [SWR](https://swr.vercel.app/)이나 [TanStack Query](https://tanstack.com/query/latest/)와 같은 데이터 페칭 라이브러리를 사용하여 클라이언트에서 데이터를 가져옵니다 (권장됨).
 
-Here's an example of using `useEffect()` inside a Next.js page:
+다음은 Next.js 페이지 내부에서 `useEffect()`를 사용하는 예시입니다.
 
 ```jsx filename="pages/index.js"
 import React, { useState, useEffect } from 'react'
@@ -42,7 +42,7 @@ export function Page() {
     }
 
     fetchData().catch((e) => {
-      // handle the error as needed
+      // 필요에 따라 에러 처리
       console.error('An error occurred while fetching the data: ', e)
     })
   }, [])
@@ -51,9 +51,9 @@ export function Page() {
 }
 ```
 
-In the example above, the component starts by rendering `Loading...`. Then, once the data is fetched, it re-renders and displays the data.
+위 예시에서, 컴포넌트는 `Loading...`을 렌더링하며 시작합니다. 그런 다음 데이터가 불러와지면 다시 렌더링하여 데이터를 표시합니다.
 
-Although fetching data in a `useEffect` is a pattern you may see in older React Applications, we recommend using a data-fetching library for better performance, caching, optimistic updates, and more. Here's a minimum example using [SWR](https://swr.vercel.app/) to fetch data on the client:
+`useEffect`에서 데이터를 가져오는 것은 이전 React 애플리케이션에서 볼 수 있는 패턴이지만, 더 나은 성능, 캐싱, 낙관적 업데이트 등을 위해 데이터 페칭 라이브러리를 사용하는 것을 권장합니다. 다음은 클라이언트에서 데이터를 가져오기 위해 [SWR](https://swr.vercel.app/)을 사용하는 최소한의 예시입니다:
 
 ```jsx filename="pages/index.js"
 import useSWR from 'swr'
@@ -71,6 +71,6 @@ export function Page() {
 }
 ```
 
-> **Good to know**:
+> **알아두면 좋은 점**:
 >
-> Keep in mind that CSR can impact SEO. Some search engine crawlers might not execute JavaScript and therefore only see the initial empty or loading state of your application. It can also lead to performance issues for users with slower internet connections or devices, as they need to wait for all the JavaScript to load and run before they can see the full page. Next.js promotes a hybrid approach that allows you to use a combination of [server-side rendering](/docs/pages/building-your-application/rendering/server-side-rendering), [static site generation](/docs/pages/building-your-application/rendering/static-site-generation), and client-side rendering, **depending on the needs of each page** in your application. In the App Router, you can also use [Loading UI with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming) to show a loading indicator while the page is being rendered.
+> 클라이언트 사이드 렌더링은 SEO에 영향을 줄 수 있음을 유념해야 합니다. 일부 검색 엔진 크롤러는 자바스크립트를 실행하지 않을 수 있기 때문에 애플리케이션의 초기 빈 상태 혹은 로딩 상태만 볼 수 있습니다. 또한 인터넷 연결이나 장치 속도가 느린 사용자들에게는 성능 문제를 일으킬 수 있는데, 전체 페이지를 볼 수 있기 전에 모든 자바스크립트가 로드되고 실행될 때까지 기다려야 하기 때문입니다. Next.js는 애플리케이션에서 **각 페이지의 필요에 따라** [서버 사이드 렌더링](/docs/pages/building-your-application/rendering/server-side-rendering), [정적 사이트 생성](/docs/pages/building-your-application/rendering/static-site-generation) 그리고 클라이언트 사이드 렌더링을 조합하여 사용할 수 있는 하이브리드 접근 방식을 권장합니다. App Router에서는 [Loading UI with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming)를 사용하여 페이지가 렌더링 되는 동안 로딩 표시기를 표시할 수도 있습니다.