1. Hydration
서버에서 렌더링된 HTML을 클라이언트에서 JavaScript와 연결하여 인터랙티브한 웹 페이지로 만드는 과정
SSR (서버 사이드 렌더링) 된 HTML 은 정적인 상태이므로, JavaScript 없이 동적인 동작을 할 수 없다.
예를 들어, 버튼을 클릭할 때마다 숫자가 올라가는 간단한 이벤트가 있는 웹 페이지가 있다고 가정해 보자.
이 경우 버튼과 카운팅이 계산될 숫자는 렌더링되어 사용자에게 보이지만,
버튼을 클릭해도 아무런 이벤트가 발생하지 않는 것이다.
클라이언트에서 JavaScript가 실행되면서 인터랙티브한 기능을 추가해 주는데,
서버에서 렌더링된 HTML을 재사용하여 React 컴포넌트와 연결한다.
2. 주요 기본 파일들
2-1. page
각 라우트에 대응하는 페이지 컴포넌트로, URL에 맞는 콘텐츠 반환
2-2. layout
페이지 레이아웃을 정의하는 파일로, 각 페이지의 상위 레이아웃 설정
2-3. not-found
페이지를 찾을 수 없는 (404 NOT FOUND) 경우 처리
'FRONT > Next.js' 카테고리의 다른 글
| Next.js 06 - 프리패칭 (0) | 2025.04.24 |
|---|---|
| Next.js 05 - React Server Component (0) | 2025.04.23 |
| Next.js 04 - 페이지 라우팅 (0) | 2025.04.22 |
| Next.js 03 - app 디렉토리 (0) | 2025.04.21 |
| Next.js 01 - SSR 과 CSR (0) | 2025.04.17 |