Week 9. 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유

<React만 쓸 때와 Next.js를 쓸 때의 차이점>

기능	React만 사용할 때	Next.js 사용할 때
서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)	기본적으로 클라이언트 사이드 렌더링(CSR) 방식. SEO 최적화 어려움 및 초기 로딩 지연.	SSR과 SSG를 지원하여 SEO 최적화와 빠른 초기 로딩 속도 제공.
파일 기반 라우팅 시스템	React Router와 같은 라이브러리 필요. 폴더 구조와 라우팅이 분리됨.	파일 기반 라우팅 제공. pages 폴더에 파일 생성 시 자동 라우팅.
API 라우트 기능	API 서버를 별도로 구축해야 하며, 백엔드와의 통신 필요.	API 라우트를 통해 API 엔드포인트 생성 가능. 백엔드 서버 없이도 API 구축 가능.
이미지 최적화 및 성능 최적화 기능	이미지 최적화 기능이 기본 제공되지 않음. 외부 라이브러리로 별도 수행.	next/image 컴포넌트를 통해 이미지 최적화, Lazy Loading 지원.
코드 스플리팅 및 자동 번들링 최적화	Webpack, Babel 등 추가 설정이 필요. 최적화를 위해 복잡한 설정 요구.	페이지 단위로 자동 코드 스플리팅 및 번들링 최적화 제공.
손쉬운 배포와 널리 지원되는 호스팅 플랫폼	배포 시 번들링 및 서버 설정 필요. 설정이 복잡할 수 있음.	Vercel 등에서 원클릭 배포 가능. 서버 렌더링 옵션 쉽게 활용 가능.
Fullstack 애플리케이션 구축 지원	프론트엔드 전용 라이브러리로 백엔드 서버가 별도로 필요.	API 라우트 기능으로 백엔드 기능 구현 가능. Fullstack 애플리케이션 구축 가능.

 

※ 참고
코드 스플리팅 및 자동 번들링 최적화는 웹 애플리케이션의 성능을 최적화하고 초기 로딩 시간을 줄이기 위해 사용되는 기술입니다. React와 Next.js에서의 구현 방식과 이점에는 차이가 있습니다.

• React만 사용할 때: 코드 스플리팅과 번들링 최적화를 위해 Webpack, Babel 설정을 별도로 해야 하고, 코드 관리가 복잡할 수 있습니다.
• Next.js를 사용할 때: 페이지 단위로 자동 코드 스플리팅과 번들링 최적화를 지원하므로 설정이 간편하며, 별도의 설정 없이도 최적화된 번들이 제공됩니다.

코드 스플리팅 (Code Splitting) : 애플리케이션 코드를 여러 부분으로 나누어 필요한 시점에 필요한 부분만 로딩하는 방식입니다. 이렇게 하면 한 번에 모든 코드를 다운로드할 필요가 없어져 초기 로딩 속도가 빨라집니다.