[Next.js] App-Router, React Server Component

현용찬·2025년 1월 2일

Page Router의 단점

페이지별 레이아웃 설정이 번거롭다.
데이터 페칭이 해당 페이지 컴포넌트에 집중된다.
즉 데이터가 해당 페이지 컴포넌트에만 딱 전달이 되기때문에 해당 페이지 안에 여러가지 컴포넌트가 존재한다면 데이터 전달하는 과정이 생각보다 번거로워 질 수 있다.
불 필요한 컴포넌트들도 JS Bundle에 포함된다.

하이드레이션을 하는 이유
HTML로 렌더링 된 페이지에 JS 코드들을 추가해서 클릭과 같은 상호작용 이벤트를 추가해 주기 위해서

Next.js에서는 서버에서 한번, 웹 브라우저에서 한 번 총 2번 렌더링이 되는데 이때, 상호작용이 없는 컴포넌트 즉 React Server Component가 2번 렌더링 되므로 TTI의 속도가 늦어질 수 있다.

APP-Router

App 디렉터리를 기반으로 파일과 폴도구조가 URL과 매핑되는 방법. 위와 같은 Page-Router의 단점을 보안하기 위해 나왔다.

App-router에서는 page.tsx라는 이름을 갖고 있는 파일이 페이지 역할 layout.tsx는 페이지의 레이아웃 역할을 한다.

페이지 라우팅 설정하기

동적 경로 설정하기

[..id].tsx
catch all segments로 "/book/1/1/1" 같은 경로가 가능하지만 "/book" 와 같은 경로는 불가능하다
[[..id]].tsx
optional catch all segment로 "/book" 과 같은 경로가 가능하다

쿼리스트링, url 파라미터

App-router에서 쿼리스트링이나 url 파라미터와 같은 경로상에 포함된 값들은 page 컴포넌트에 props로 전달된다.
즉, Promise에서 꺼내 써야한다.

App-router에서 query 값을 불러오려면 useSearchParams를 통해 불러와야한다.
-> page-router에서는 userouter로 부터 query를 불러와서 꺼낸다.

export default async function page({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  return <div>book/[id] 페이지 입니다:{id}</div>;
}

Layout

route-group

특정 페이지만 원하는 layout을 적용 시키고 싶을때 사용한다.
폴더 명이 소괄호에 쌓여져 있으며 경로상에는 아무런 영향도 끼치지 않는다.

즉, 경로상에는 아무런 영향을 끼치지 않고 동시에 각기 다른 경로를 가지는 페이지를 하나로 묶에서 동일한 레이아웃을 적용시키고 싶을때 사용한다.

React Server Component

React 18v 부터 새롭게 추가된 유형의 컴포넌트로 서버측에서 실행되는 컴포넌트이다
(브라우저에서 실행되지 않는다.)

Server Component 등장 배경

Next에서는 js가 서버,브라우저에 두번 렌더링이 되는데 이때 상호작용이 없는 컴포넌트들이 두번 렌더링이 되서 tti가 오래 걸리기 때문에 서버 컴포넌트가 등장했다.

특징

App-router에서는 기본적으로 server component로 동작하기 때문에 따로 만들 필요가 없다

Client Component는 원래 우리가 알고 있는 컴포넌트라고 생각하면 된다. App-router을 사용하는 Next에서는 최상단에 "use Client"를 작성하여 사용하면 된다

주의 사항

client component에서 server component를 import 하면 server component가 clinent component가 된다.

만약 client component에서 server component를 렌더링 하고 싶으면 children을 통해 이미 렌더링된 server component를 받으면된다.