- 앱라우터는 page router 와 다르게 page.tsx 파일만 페이지로 취급한다.
- 경로를 만들고싶으면 무조건 파일 먼저 만들기 !
- 동적 경로일 경우에도 [id] 파일 밑에 page.tsx 파일을 만들어줘야한다.
💭 App router 버전으로 다시 만들기
- App -> Search -> page.tsx 생성
- App router는 props로 쿼리의 값이 전달됨
- searchParams의 q 값만 쓸것이기 때문에 q?: string q값은 string이며 없을 수도 있다고 타입명시 해주면 된다.
- id는 string 일수도있고 배열일 수도 있기때문에 타입은 {id: string | string[]}으로 정해주자
- [[...id]] 로 정하면 optional catch all segment로 book/123/1222 등 여러 url 경우 사용가능하다.
🔖 레이아웃 설정하기
레이아웃은 layout.tsx 파일을 만들면 된다
- 아래 새로운 layout.tsx를 생성하면 위에 생성된 layout.tsx와 중첩되어 적용되게 된다.
- layout.tsx는 {chlidren}를 명시해줘야 page.tsx가 적용될 수 있다.
{children}의 타입은 ReactNode로 정해주기
특정 페이지들에만 적용되는 레이아웃 파일을 만들어보자
(book 페이지를 제외한 search, page에 적용: Route group 사용
- Next.js에서 ()소괄호는 Route group을 의미한다. 경로상에 아무런 영향을 미치지 않는 폴더이므로
같은 레이아웃을 적용하고 싶은 페이지들을 옮기면 된다.
- layout.tsx를 page.tsx와 search에 같이 적용시키고 싶기 때문에 같은 폴더에 모은다
🔖 리액트 서버 컴포넌트 이해하기
React Server Component : 서버가 아닌 브라우저 측에서는 아예 실행되지 않는 컴포넌트
🔴 서버 컴포넌트 : 사전 렌더링을 진행할 때 딱 한번만 실행됨 - > ` 상호작용이 필요없는 컴포넌트`
🟢 클라이언트 컴포넌트 : 사전 렌더링을 진행할때 , 하이드레이션 진행할때 총 2 번 실행됨 - ` 상호작용 필요`
-> Next.js 공식문서에서는 페이지의 대부분을 `서버 컴포넌트` 로 구성 할 것을 권장하며, `클라이언트 컴포넌트` 는 꼭 필요한 경우에만 사용할 것을 권장한다.
- Next.js 는 기본값이 `서버 컴포넌트` 이기 때문에 index의 page.tsx console창을 확인해보면 `서버측 콘솔에서만 출력` 되는것을 알수 있다.
- 클라이언트 컴포넌트로 사용하고 싶다면 use client를 위에 선언해주면 되는데, 이제 브라우저측에서 콘솔창이 출력되는 것을 볼 수 있다!
🔖 리액트 서버 컴포넌트 주의사항
추가로
1. 브라우저 측에서 실행되는 React Hooks(useState 등)와 이벤트 핸들러(onclick 등)은 서버 컴포넌트에 포함되면 안된다
2. 클라이언트 컴포넌트는 서버측, 클라이언트측 총 2번 실행되므로 서버측에서도 1 번 실행된다
3. 클라이언트 컴포넌트는 하이드레이션을 위해 2번 실행되어 서버 컴포넌트가 하이드레이션될 때 없는 코드라고 뜨게된다.
- 이때 next.js는 서버컴포넌트를 자동으로 클라이언트 컴포넌트로 변환시킨다.
서버 컴포넌트로 사용하고 싶다면, 클라이언트 컴포넌트 안에 `{children}` 요소를 사용해주면 된다.
직렬화: 단순한 형태로 변화시키는것, 직렬화로 전달이 불가능하다 ~
🔖 네비게이팅
App router도 page router와 동일하게 Client Side Rendering방식으로 처리된다.
Pre-Fetching(프리페칭)
= JS Bundle 파일을 불러오는데 걸리는 시간을 줄여주기 위해, 데이터를 미리 불러오는 기능.
=> App router 방식에는 서버컴포넌트가 추가돼서 방식이 약간 달라짐
🟢 JS Bundle : 클라언트 컴포넌트만 포함되어 있음. (서버 컴포넌트❌)
🔴 RSE Payload : 서버 컴포넌트를 실행한 결과물.
마지막에는 JS Bundle만 하이드레이션하고 RSC Payload과 합쳐서 페이지를 교체하게 된다.
'🌃 Next.js > 🔜 next.js-study' 카테고리의 다른 글
| [Next.js] 6. 페이지 캐싱 (0) | 2025.03.27 |
|---|---|
| [Next.js] 5. 데이터패칭 (0) | 2025.03.25 |