Next.js App Router, 서버 컴포넌트와 클라이언트 컴포넌트 알아보기

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

 

 

9. Next.js

1. Netxt.js 란

 

1) 전통적인 웹 (요청에 대한 응답이 항상 HTML)

전통적인 웹에서는 사용자가 페이지를 요청할 때마다 서버가 전체 HTML 을 새로 생성해서 전달했다.

문제점 :

• 같은 레이아웃을 공유하는 페이지도 전체  HTML 이 다시 생성되므로 불필요한 중복이 많음
• 기존의 페이지를 새로 요청하므로 사용자는 동일한 내용을 다시 받고, 서버는 같은 페이지를 매번 새로 렌더링해서 리소스가 낭비됨

 

2) SSR(Server Side Rendering)

그래서 SSR 등장!

React 를 서버에서 실행해서 HTML 을 렌더링해서 응답한다. 요청마다 HTML 을 새로 생성한다는 점에서는 전통적인 웹과 같지만, 그 HTML 에는 React 앱이 포함되어 있어서 첫 화면 이후에는 클라이언트에서 React 가 takeover

 

• 서버가 HTML 생성
  사용자가 SSR 페이지를 요청하면 서버는 React 앱을 실행해서 정적인 HTML을 만들어 클라이언트에 전달
• 브라우저가 HTML을 받아 렌더링
  사용자는 바로 콘텐츠를 볼 수 있음 (속도 빠름 + SEO 가능)
• React가 takeover(Hydration)
  브라우저에 있는 React 코드가 해당 HTML을 탐지하고, 거기에 이벤트 처리기, 상태 관리, 동작 등 인터랙션을 붙임
  → 정적인 HTML이 다시 동적인 React 앱으로 작동하게 됨

예를 들어, 서버가 <button>좋아요</button>이라는 HTML을 먼저 보내주면, 사용자가 버튼을 볼 수는 있지만 클릭해도 아무 일도 안 일어남난다. React가 Hydration을 하면 이 버튼에 "좋아요 증가" 로직이 붙어서 사용자 클릭 시 동작하는 SPA처럼 기능이 살아나는 것

 

 

3) SSG(State Site Generation, 정적 사이트 생성)

 

하지만 SSR도 요청마다 HTML을 새로 만들다 보니 서버 비용 ↑, 렌더링 시간 ↑, 트래픽 증가에 취약하다는 단점이 있다.

→ 이런 비효율성을 줄이기 위해 SSG 사용!

 

매번 만드는 게 아니라 미리 HTML 을 만들어주는 방식으로, 페이지 요청 시마다 HTML 을 동적으로 생성하는 것이 아니라 빌드 시점에 필요한 HTML 파일들을 생성해주고, 사용자가 요청하면 그 정적인 파일을 그대로 응답합 - 속도가 빠르고 서버 부하가 낮으며, 클라이언트에게도 빠른 응답과 렌더링 가능해짐!

 

 

2. Next.js 시작하기

 

1) Next.js 시작하기 (Cli 시작하기)

pnpx create-next-app@latest

 

 

2) 프로젝트 확인하기

pnpm ryun dev

 

연습문제 1) 

홈 화면을 변경하세요. (변경하면서 전체 구조를 파악하세요.)

1. 페이지(/)에 대한 title을 설정하세요.

2. 임의의 글자를 작성하여 주세요.

3. 임의의 이미지를 다운로드 하시고 public 폴더에 넣어주세요.

4. 이미지를 화면에 보이도록 해주세요. (단, 이미지 크기는 200 x 200으로 합니다.)

5. 크롬 네트워크 탭에서 (localhost:3000) 요청에 대한 응답을 확인하세요. (html이 비어있는지 생성되어 있는지)

페이지의 제목은 위의 meta 에서 바꿀 수도 있고, page.tsx 에서 바꿀 수도 있다.

 

여기에서는 <img> 가 아닌 Image 컴포넌트를 사용했는데 그 이유는 Next.js 가 자동 최적화와 Lazy Loadin 을 지원하기 때문이다.

• 이미지를 브라우저 크기에 맞춰 자동 리사이징하고, WebP 등 최신 포맷으로 변환해서 더 빠르게 로딩됨
• 사용자가 스크롤로 이미지를 보기 전까진 로딩하지 않음 → 페이지 속도 향상

localhost:3000 요청에 대한 응답을 확인하세요. (html이 비어있는지 생성되어 있는지) 라는 질문에서, 위의 사진과 같이 html 이 들어가고 있는 걸 확인할 수 있다. 여기서 에서 HTML 이 SSR/SSG 로 생성되었다는 것을 알 수 있다. 만약, 내용이 텅 비어 있다면 CSR 로 렌더링되었다는 뜻이다.

 

 

3. Next.js 라우팅 - App Router

 

1) App Router 기본 - file-based Routing

Next.js 에서 App Router 는 파일 기반 라우팅이다.

• layout.tsx : 하위 폴더에 있는 모든 page에 대한 레이아웃, 모든 페이지가 해당 layout을 공유함
• <폴더이름> : 폴더 경로 자체가 라우팅 시스템
• page.tsx : 해당 경로에 해당하는 url 에 접속했을 때 렌더링할 페이지
• <폴더이름>/[파라미터이름]/page.tsx : 파라미터를 인자로 받는 페이지, 동적 라우팅 (/:postId 와 같은 형태로 표현)
• (<폴더이름>) : 폴더 자체는 경로에 영향을 주지 않는 단순 grouping

 

연습문제 2)

/portfolio에 page를 만들어주세요.

/posts에 page를 만들어주세요.

 

 

2) App Router 기본(2) - layout.jsx 공통 레이아웃 만들기

공통된 레이아웃을 작성할 때 사용하는 것이 layout.tsx 이다. 컴포넌트 하나로 전체에 같은 layout 을 적용하는 게 가능하기 때문에 유지보수가 편해진다.

 

3) App Router 기본(3) - Dynamic Routing

다이나믹 라우팅은 경로의 일부분을 변수처럼 처리해서 하나의 페이지 컴포넌트로 여러 URL을 대응할 수 있게 하는 기능이다.

 

연습문제)

참조 URL: https://jsonplaceholder.typicode.com/albums

1. URL “localhost:3000/client-albums” 로 접속을 하면 위 URL에 대한 album리스트(제목만)가 보여지도록 해주세요. (ul > li 태그 사용) 단, 클라이언트에서 요청을 보내야 합니다. (순수 React)

2. URL “localhost:3000/server-albums” 로 접속을 하면 위 URL에 대한 album리스트(제목만)가 보여지도록 해주세요. (ul > li 태그 사용) 서버에서 요청을 보내야 합니다. (응답 HTML에 Album 내용 포함)

브라우저에서 실행되는 클라이언트 컴포넌트이다. 초기에는 HTML 에 데이터가 없어서 로딩 상태가 먼저 보이고 그 이후 데이터를 받아서 렌더링 하는 형태이다. 그래서 useEffect() 가 실행될 때까지는 화면이 비어 있다. CSR 동작 구조이다.

 

서버에서 실행되는 컴포넌트이다. 페이지가 생성될 때마다 fetch 가 실행되고 HTML 이 완성되어 클라이언트로 전달된다. 클라이언트는 이미 HTML에 앨범 정보가 들어 있으므로 바로 화면을 볼 수 있다. SSR or SSG 처럼 동작한다.

 

 

4. React Server Component와 React Client Component

 

1) RSC (React Server Component) 와 Component

Next.js는 기본적으로 RSC (React Server Components) 구조를 따른다. 즉, 별도의 설정 없이도 작성한 컴포넌트는 기본적으로 서버 컴포넌트로 간주되며, 서버에서 실행된다.

 

서버 컴포넌트

• 렌더링 시점에 서버에서 실행되며, 빌드 시점(SSG) 또는 요청 시점(SSR)에 HTML을 미리 생성해서 클라이언트로 전달한다
• output: 'export' 설정을 사용하는 경우, 빌드 시점에만 실행되는 정적 사이트 생성된다
• 브라우저에서 실행되지 않기 때문에, React의 클라이언트 전용 훅들(useState, useEffect 등)이나 브라우저 전용 API(localStorage, window, document 등)는 사용할 수 없다

클라이언트 컴포넌트

• 브라우저에서 실행된다
• useState, useEffect, 이벤트 핸들링 등 클라이언트 전용 기능을 자유롭게 사용할 수 있다
• Next.js에서는 클라이언트 컴포넌트임을 명확히 하기 위해 파일 상단에 반드시 "use client" 지시어를 작성해야 한다
• 클라이언트 컴포넌트라고 해도 Next.js의 전체 렌더링 트리는 서버에서 먼저 실행되어 HTML을 만든 후 브라우저에 전달된다. 즉, 클라이언트 컴포넌트도 최초에는 서버에서 렌더링 과정에 포함되며, 이후 브라우저에서 이어서 동작한다