[Next.js] React.js와 Next.js

✏️ 참고)

https://nextjs-ko.org/docs

https://nextjs.org/docs

Introduction | Next.js

시작하기 – Nextjs 한글 문서

---

※ Next.js ?

• Vercel에서 만든 Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크 이다.
• 사용자 인터페이스를 만들기 위해 React Components를 사용하고, 추가 기능과 최적화를 위해 Next.js를 사용한다.
• 내부적으로 Next.js는 번들링, 컴파일 등 React에 필요한 도구를 추상화하고 자동으로 구성한다. → 설정에 시간을 들이지 않고 애플리케이션 구축에 집중할 수 있다.
• Next.js는 인터랙티브하고 동적이며 빠른 React 애플리케이션을 구축하는데 도움을 준다.

---

※ React.js 와 Next.js의 차이

1. 기본적인 정의와 역할

① React.js

• React는 UI 인터페이스(반응형 사용자 인터페이스)를 구축하는데 초점이 맞춰진 JavaScript 라이브러리
• 컴포넌트 기반 설계를 통해 재사용성과 유지 보수성을 높임
• CSR(클라이언트 사이드 렌더링)
• 앱의 전체 구조를 설계하려면 라우팅, 상태 관리 등 추가 라이브러리가 필요
• 라이브러리는 코드 내에서 사용하려고 설치하는 것이지만, 사용의 주체는 개발자

② Next.js

• React.js 기반의 프레임워크로, SSR(서버 사이드 렌더링), SSG(정적 사이트 생성) 등 다양한 기능을 제공
• 파일 기반 라우팅, 이미지 최적화, API 라우트 등 React 프로젝트를 더 쉽게 설정하고 실행할 수 있는 기능들을 포함

---

2. 렌더링 방식 (Rendering)

① React.js

• 기본적으로 CSR(Client-Side Rendering, 클라이언트 사이드 렌더링)을 사용
• 페이지 로드 후 클라이언트에서 JavaScript로 DOM을 구성하고 데이터를 가져와 렌더링
• 초기 로딩이 느릴 수 있지만, 앱이 로드되면 빠른 사용자 경험을 제공

② Next.js

• SSR(Server-Side Rendering) : 서버에서 HTML을 미리 생성해 클라이언트로 전달
• SSG(Static Site Generation) : 빌드 시 HTML을 정적으로 생성
• CSR(Client-Side Rendering) : React와 동일한 방식
• 페이지 로드 성능과 SEO를 강화할 수 있는 SSR와 SSG가 주요 강점

---

3. 라우팅 (Routing)

① React.js

• 기본적으로 라우팅 기능을 제공하지 않으므로, React Router 같은 라이브러리를 사용하여 설정
• 코드에 따라 라우팅 설정이 복잡해질 수 있음
• 동적 라우팅과 코드 분할은 수동 설정이 필요

② Next.js

• 파일 기반 라우팅을 지원
• 동적 라우팅, 정적 경로 생성 등을 간단히 설정할 수 있음
• app 디렉토리에서 경로를 관리하며, 라우트 핸들러를 통해 세부적인 요청 처리도 가능
• /pages 폴더 내 파일이 URL경로가 되며, 별도의 설정이 필요 없음 → 예) /pages/about.tsx는 /about 경로로 자동 매핑

---

4. SEO 및 성능

① React.js

• 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하므로, 초기 HTML이 빈 상태로 로드되기 때문에 SEO 최적화가 어려움
• 서버에서 HTML을 생성하려면 추가 설정이 필요 → (e.g., Next.js 사용).

② Next.js

• 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 통해 페이지 로드 시 완전한 HTML을 제공하므로 SEO에 유리
• 빌드 시 최적화된 정적 리소스와 자동 이미지 최적화를 제공

---

5. 데이터 가져오기

① React.js

• 데이터 페칭을 위한 내장 기능이 없음 → Fetch API, Axios 등의 외부 라이브러리를 사용
• 데이터 상태 관리를 위해 Redux, Zustand, React Query 등을 추가로 설정

② Next.js

• React Server Components를 활용
• 최신 Next.js15에서는 주로 React의 use Hook과 Server components를 통해 처리 → 예) headers, cookies, params 등의 API를 활용한 비동기 데이터 처리

---

6. 이미지 최적화

① React.js

• 이미지 최적화를 위한 기본 제공 기능이 없음
• 별도의 라이브러리를 사용

② Next.js

• next/image 컴포넌트를 통해 이미지 최적화를 기본으로 제공
• 이미지 크기 조정, 포맷 변환(WebP), lazy Loading 등을 제공

---

7. 프로젝트 사용 사례

① React.js

• SPA(Single Page Application) 개발에 적합
• 사용자 인터렉션이 많은 애플리케이션
• SEO가 중요하지 않은 내부 시스템 또는 대시보드

② Next.js

• SEO가 중요한 블로그, 이커머스, 마케팅 웹사이트
• 빠른 로딩과 server-client 혼합 렌더링이 필요한 애플리케이션
• 개발 및 배포 속도를 중시하는 프로젝트

---

🤔 React.js는 UI 구축을 위한 라이브러리로서 자유롭고 유연한 반면, Next.js는 React 기반 프레임워크로 추가 기능을 통해 개발 속도와 생산성을 높인다. 프로젝트의 성격(SEO, 데이터 페칭 요구 사항, 렌더링 방식 등)에 따라 두 기술 중 적합한 것을 선택하자.