React 서버 컴포넌트, 클라이언트 컴포넌트 뿌시기💣

신한투자증권 프로 디지털 아카데미 과정

 

 

지난 시간 내용 복습✨

지난 시간에 배웠던 걸 다시 정리해보면 .. 아래와 같이 정리할 수 있을 것 같다 !

 

서버 컴포넌트 하위에는 클라이언트 컴포넌트, 서버 컴포넌트 모두 구성 가능

클라이언트 컴포넌트 하위에는 클라이언트 컴포넌트만 구성 가능

서버 컴포넌트만 async, await 사용 가능

클라이언트 컴포넌트 내부에서만 useState, useEffect 등의 hook 사용 가능

 

 

4. React Server Component와 React Client Component

 

1) RSC (React Server Component) 와 Component

실습)

1. /components/blocks/PostList 폴더 생성

2. index.ts, PostList.client.jsx, PostList.jsx 파일 생성

3. 각 내용 작성

 

우리는 앞으로 server 에서 띄울 페이지는 PostList.tsx, 클라이언트에서 보여줄 페이지는 PostList.client.tsx 로 구분해서 작성하기로 했다.

 

 

2) Dynamic Routing에서의 RSC vs Component

우리는 처음에 /app/(main)/posts/[postId]/page.jsx가 있을 때, postId를 파라미터(변수)로 받을 수 있다고 했었다. 이 파라미터를 받는 방법에는 서버 컴포넌트에서 받는 방법과 클라이언트 컴포넌트에서 받는 방법, 이렇게 두 가지가 있다.

 

서버 컴포넌트

• [postId]처럼 [ ] 로 경로상 싸여있는 폴더는 해당 page에서 params라는 props로  받을 수 있다
• 이 때 params는 Promise객체이기 때문에 await로 사용해야 한다

클라이언트 컴포넌트

• import { useParams } from "next/navigation"; 과 같이 useParams라는 hook을 사용한다

 

먼저, 공통적으로 많이 쓰일 type 을 만들어보자.

 

그리고 /components/blocks 를 만들고 그 안에 index.tsx, PostItem.client.tsx, PostItem.tsx 를 만들어서 파라미터에 따른 데이터들을 받아올 수 있도록 작성한다.

 

그러면 아래와 같이 콘솔에서 확인할 수 있다.

 

서버에서의 렌더링에 대해 설명해보면,

• 사용자가 /posts/1 요청 → Next.js가 해당 경로를 파싱하여 params = { postId: '1' } 를 props로 자동 전달(클라이언트에서 따로 추출할 필요 없이 컴포넌트 함수의 인자로 바로 사용이 가능하다)
• 서버 컴포넌트에서 이 postId를 받아 <PostItemClient postId={params.postId} /> 형태로 클라이언트 컴포넌트에 넘김

클라이언트에서의 렌더링은,

 

• 서버가 클라이언트에 HTML과 함께 JS 번들 전달
• 브라우저에서 클라이언트 컴포넌트가 hydrate됨
• useParams()는 브라우저에서 현재 URL을 기반으로 { postId: '1' } 추출(URL 직접 파싱하지 않고 useParams() 훅을 사용해서 라우터에서 현재 파라미터를 추출한다)
• 동시에, 서버에서 넘겨준 props.postId도 동일하게 '1'

왜 둘 다 사용하는가?

 

• props.postId는 서버에서 안전하게 계산된 값을 클라이언트로 넘길 수 있어서 신뢰성이 높음
• useParams()는 클라이언트 전용 동작이 필요할 때 유용 (ex. 라우팅 변화 감지)

 

 

4. React Server Component와 React Client Component

 

3) Output Mode

Next.js의 output 모드는 앱의 빌드 결과물 형태를 지정하는 설정이다.

next.config.js 파일에서 지정하며, 주로 어떻게 페이지를 생성하고 배포할지를 정의하는 데 사용한다.

 

default

• 아무 것도 설정하지 않으면 기본 모드로 빌드된다
• next build를 실행하면 .next 디렉토리 안에 static 생성
• 이 디렉토리에는 서버사이드 렌더링, 정적 페이지 생성, API 라우트 등에 필요한 모든 것이 포함
• Vercel과 같은 플랫폼이나 Node.js 서버 환경에 직접 배포할 때 사용하는 전통적인 방식

standalone

• Node.js 앱처럼 배포 가능한 구조로 빌드
• 배포에 필요한 최소한의 파일(Next.js server 폴더, 앱 코드, 종속성)만 포함하는 독립 실행형 폴더 생성 - 배포 패키지의 크기를 획기적으로 줄여줌
• 서버 기능(SSR, API Route 등)을 그대로 사용할 수 있음

.next 에서 standalone 폴더만 배포하면 된다

 

export

• 앱의 모든 페이지를 정적 HTML로 미리 생성해서 빌드한다
• Next.js 의 next export 명령과 동일한 결과
• 서버가 전혀 필요 없는 순수 정적 사이트를 생성한다 - 빌드 시점에만 서버 컴포넌트 실행, 그 이후에는 서버 불필요
• /out 폴더가 생성된다

 

4) Router와 Link 컴포넌트

 

Q. 왜 <a> 태그가 아니라 <Link> 컴포넌트를 사용하는가?

• React는 페이지 전체가 아니라 변경된 부분만 다시 그리는 게 핵심인데, <a> 태그는 새로운 HTML 페이지를 서버에 요청해서 전체 페이지가 새로고침 된다. (Server Side Routing(SSR) 또는 기본 웹 라우팅)
• 하지만 <Link> 컴포넌트는 클라이언트 측 라우팅을 지원하기 때문에 React 앱은 그대로 유지되고, 변경된 URL에 맞는 컴포넌트만 새로 렌더링한다. (Client Side Routing(CSR))
• 따라서, <Link> 컴포넌트를 사용함으로써 불필요한 서버 요청이 줄고, 빠르고 부드러운 페이지 전환이 가능하다. 특히 Next.js는 <Link>를 통해 내부 페이지 전환 시 미리 필요한 리소스를 prefetch(사전 로드)하기도 하므로 성능 최적화 또한 가능해진다.

 

5) Link 컴포넌트와 useRouter

메서드	설명	히스토리 추가	뒤로 가기
router.push(href: string)	이동 (기록 O) URL 을 변경하면서 해당 경로로 이동 기존 히스토리에 경로가 추가되어 뒤로 가기 가능 ex. 일반적인 페이지 이동에서 사용	✅	✅
router.replace(href: string)	이동 (기록 X) 히스토리를 덮어쓰기 때문에 뒤로 가기 불가능 ex. 로그인 후 홈으로 이동 시 사용 → 뒤로 가면 로그인 페이지 안 나오게	❌	❌
router.refresh()	현재 페이지 새로고침	❌	✅
router.back()	뒤로 이동	-	-
router.forward()	앞으로 이동	-	-