Next.js 정리 — React를 쓰다 보면 반드시 헷갈리는 그 지점들

React로 프로젝트를 시작하다 보면 어느 순간 이런 질문이 생긴다.

• Next.js는 왜 필요한가?
• 서버 사이드 렌더링이 도대체 뭐길래?
• React Query는 안 써도 되는 건가?
• Next.js를 쓰면 Node.js를 안 쓰는 건가?

이 글은 내가 보기위해 Next.js의 기초 개념 → 헷갈리는 질문 → 답변 순서로 정리한 기록이다.

 

---

1. React와 Next.js의 가장 큰 차이

React (Vite / CRA 기준)

React는 기본적으로 CSR(Client Side Rendering) 방식이다.

실행 흐름은 이렇다.

1. 브라우저가 index.html을 요청
2. 빈 <div id="root"></div>만 있는 HTML을 받음
3. JS 파일 다운로드
4. JS 실행 → React 실행
5. 화면 렌더링

즉, HTML은 껍데기고, 화면은 전부 JS가 그린다.

---

Next.js

Next.js는 React 기반이지만, 서버에서 HTML을 미리 만들어서 내려줄 수 있다.

1. 브라우저가 페이지 요청
2. 서버(Node.js)가 React 컴포넌트를 실행
3. HTML을 생성해서 브라우저로 전달
4. 브라우저는 바로 화면 표시

👉 이게 SSR(Server Side Rendering)이다.

---

2. “서버에서 HTML을 만든다”는 말의 정확한 의미

여기서 말하는 서버는 백엔드 API 서버와 동일한 개념이 아니라,
👉 Next.js를 실행하는 Node.js 서버다.

• React(Vite): 브라우저에서 React 실행
• Next.js: Node.js에서 React 실행

즉, React 컴포넌트를

• 어디서 실행하느냐의 차이다.

---

3. Next.js는 React를 바로 실행시켜주는 건가?

자주 생기는 오해다.

“Next.js는 index.html 없이 React를 바로 실행한다?”

 

❌ 아니다.

Next.js도 내부적으로 HTML을 만든다.
다만 그 HTML을 개발자가 직접 만들지 않아도 된다.

 

React (Vite) index.html → JS → React 실행 Next.js layout.tsx + page.tsx → HTML 생성 → 브라우저 전달

---

4. Next.js 폴더 구조가 곧 라우팅이다

React에서는 보통 react-router-dom을 쓴다.

 

<Route path="/dashboard" element={<Dashboard />} />

하지만 Next.js는 파일 시스템 기반 라우팅이다.

app/
 ├─ page.tsx          → /
 ├─ dashboard/
 │   └─ page.tsx      → /dashboard

• 폴더 = URL
• page.tsx = 해당 페이지

👉 react-router-dom이 필요 없다.

---

5. Server Component는 백엔드 폴더인가?

아니다.
프론트엔드 폴더 안에 있지만 서버에서 실행되는 컴포넌트다.

 

app/page.tsx ← 기본적으로 Server Component

• 브라우저로 JS가 안 내려감
• Node.js에서 실행
• DB, API 접근 가능

👉 “프론트 코드인데 서버에서 돈다”가 핵심이다.

---

6. “데이터 페칭 로직을 서버로 옮긴다”는 말의 의미

이 문장을 처음 보면 이렇게 오해하기 쉽다.

“axios를 백엔드로 옮긴다는 말인가?”

 

❌ 아니다.

의미는 이거다.

 

기존 React 브라우저 → axios → API Next.js Server Component 서버(Node) → fetch → API → HTML에 데이터 포함

👉 데이터를 포함한 HTML을 내려준다는 뜻이다.

---

7. 그럼 React Query는 필요 없나?

자주 나오는 질문이다.

정답은 “역할이 다르다”.

초기 페이지 데이터	Next.js 서버 fetch
사용자 인터랙션	React Query
낙관적 업데이트	React Query
폼 / 버튼 / 토글	클라이언트 상태

Next.js는 초기 렌더링에 강하고,
React Query는 사용자 상호작용에 강하다.

---

8. Next.js는 클라이언트 캐싱이 약한가?

이 말의 배경은 이거다.

• React Query: stale-while-revalidate 가능
• Next.js: 라우트 단위 캐싱

그래서:

• 실시간 UX
• 낙관적 업데이트
• 테이블 인라인 수정

같은 경우는 React Query가 더 적합하다.

👉 Next.js = “처음 빠르게 보여주기”
👉 React Query = “계속 부드럽게 바꾸기”

---

9. Next.js를 쓰면 Node.js가 꼭 필요할까?

개발·SSR 기준으로는 필수다.

• Next.js 서버 = Node.js
• Server Component 실행 = Node.js

다만:

• SSG(정적 생성)만 쓰면
• 결과물은 HTML/JS 파일이라
• CDN 배포 가능

---

10. Vite + React vs Next.js, 언제 뭘 쓰나?

Vite + React가 더 좋은 경우

• 관리자 대시보드
• 내부 서비스
• 복잡한 상태 관리
• SEO 불필요

Next.js가 좋은 경우

• SEO 중요
• 초기 로딩 속도 중요
• 서버에서 데이터 조합 필요
• 이미지 최적화, SSR 필요

---

11. 한 줄로 정리하면

React는 “브라우저에서 화면을 그리는 라이브러리”
Next.js는 “React를 서버에서도 실행하게 해주는 프레임워크”

---

마무리

Next.js는 React를 대체하는 게 아니다.
React의 실행 위치를 확장하는 도구다.

그래서 결국 중요한 질문은 이거다.

“이 프로젝트에서 화면을 어디서 그리는 게 더 좋은가?”

 

이 질문에 답할 수 있다면,
Next.js를 써야 할지 말지도 자연스럽게 결정된다.