React만으로는 부족한 자리

React는 화면 조각(컴포넌트)을 만드는 라이브러리입니다. 주소가 /blog/1일 때 어떤 파일을 열지, HTML을 서버에서 만들지, 비밀 키를 브라우저에 안 실을지는 React가 정해 주지 않습니다.

Next.js가 그 자리를 채웁니다. 폴더로 URL을 정하고, 서버에서 데이터를 읽고, 결과 HTML을 보낸 다음, 버튼·입력처럼 브라우저가 필요한 부분만 JavaScript로 살립니다.

App Router와 Pages Router

라우터는 “이 주소는 이 화면”을 정하는 규칙입니다. Next.js에는 두 가지가 있습니다.

구분	App Router	Pages Router
폴더	app/	pages/
화면 파일	page.js	index.js, about.js
데이터	컴포넌트 안에서 await	getServerSideProps 등 별도 함수
지금 배울 대상	새 프로젝트의 기본값	이미 있는 옛 코드만

검색 결과에 getServerSideProps가 보이면 Pages Router 글입니다. 이 학습의 예제와 파일 이름이 다릅니다.

파일 하나가 주소가 된다

app 안의 폴더는 URL 조각입니다. 그 폴더에 page 파일이 있어야 그 주소로 들어올 수 있습니다. layout 파일은 그 아래 화면에 공통으로 깔리는 틀(머리글, 바닥글)입니다.

• app/page.js → /
• app/blog/page.js → /blog
• app/blog/[slug]/page.js → /blog/hello처럼 값이 바뀌는 주소

폴더 이름을 괄호로 감싸면 URL에 나오지 않습니다. app/(shop)/cart/page.js의 주소는 /cart입니다. 밑줄로 시작하면 라우트가 아닙니다. app/blog/_components/Post.js는 화면 조각일 뿐 주소가 없습니다.

기본은 서버 컴포넌트

page와 layout은 처음부터 서버 컴포넌트입니다. 서버에서 실행되므로 데이터베이스 비밀번호를 브라우저 묶음에 넣지 않고 조회할 수 있고, 그 결과 HTML만 내려갑니다.

클릭, useState, localStorage처럼 브라우저에서만 되는 일은 클라이언트 컴포넌트입니다. 파일 맨 위에 'use client'를 적으면 그 파일과 그것이 직접 가져오는 모듈이 브라우저용 JavaScript에 포함됩니다.

서버 컴포넌트 안에 클라이언트 컴포넌트를 넣을 수 있습니다. 반대 방향은 가져오기(import)로는 안 되고, children처럼 이미 서버에서 그린 결과를 슬롯으로 넘기는 방식은 됩니다. 사용 예는 컴포넌트·데이터에 있습니다.

첫 화면과 그다음 이동

처음 접속하면 서버가 HTML을 만들어 바로 보여 줍니다. 이어서 React Server Component Payload라는 압축된 트리가 오고, 클라이언트 컴포넌트만 하이드레이션됩니다. 하이드레이션은 이미 그려진 HTML에 클릭 같은 이벤트를 붙이는 과정입니다.

같은 사이트 안의 다른 주소로 이동할 때는 전체 HTML을 다시 받지 않습니다. 미리 받아 둔 Payload로 바뀐 구간만 갈아 끼웁니다. 그래서 내부 이동은 <a>가 아니라 next/link의 Link를 씁니다.

정적, 동적, 스트리밍

세 단어는 “언제 HTML을 만드는가”의 차이입니다.

• 정적: 빌드할 때 만들어 두고 여러 요청이 같은 결과를 씁니다. 소개 페이지처럼 사람마다 내용이 같을 때.
• 동적: 요청마다 서버에서 다시 만듭니다. 로그인한 사용자, 쿠키, 방금 바뀐 목록.
• 스트리밍: 느린 구간을 기다리지 않고, 준비된 HTML부터 보내고 나머지는 나중에 채웁니다. loading.js 또는 <Suspense>가 그 경계입니다.

지금 문서의 fetch는 기본으로 캐시하지 않습니다. 그래서 서버에서 await fetch(...)를 하면 그 응답이 올 때까지 그 구간이 막힐 수 있습니다. 느린 목록은 Suspense로 감싸 나머지 화면을 먼저 보여 줍니다. “fetch는 자동으로 캐시된다”는 글은 옛 기본값입니다.

요청이 지나가는 곳

1. 브라우저가 URL을 요청합니다.
2. 프로젝트 루트의 proxy.js가 있으면, 응답이 끝나기 전에 리다이렉트·헤더 수정 같은 가벼운 처리를 할 수 있습니다. Next.js 16 전부터는 이 파일을 middleware.js라고 불렀습니다. 하는 일은 같습니다.
3. 주소에 맞는 layout과 page가 서버에서 실행됩니다.
4. HTML과, 상호작용에 필요한 JavaScript가 브라우저로 갑니다.

Proxy는 로그인 전체를 대신하지 않습니다. 느린 조회나 권한의 최종 판단은 페이지·서버 함수 안에서 합니다. 단순 주소 변경은 next.config의 redirects로 충분할 때가 많습니다.