✔️Next.js
🔹 Next.js 란 ?
Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 기반 프레임워크이다.
프론트엔드의 UI는 React로 구성하며, Next.js는 페이지 라우팅, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 및 성능 최적화와 같은 추가 기능을 제공한다.
또한 Next.js는 번들링, 컴파일 등의 작업을 추상화하고 자동으로 처리해, 개발자가 설정에 시간을 들이지 않고 애플리케이션 개발에 집중할 수 있도록 돕는다.
개인 개발자든 대규모 팀이든 Next.js는 동적이고 빠른 React 애플리케이션을 효율적으로 구축하는 데 큰 도움을 준다.
🔹 - 왜 React와 함께 사용하나요?
Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR)을 지원하고 SEO(검색 엔진 최적화)에 유리하기 때문에 많이 사용한다.
Next.js는 사용자가 페이지에 접속할 때 서버에서 SSR 방식으로 HTML을 먼저 렌더링한 후, 브라우저가 JavaScript를 다운로드하고 React를 실행하는 방식으로 작동한다. 이를 통해 SEO에 유리한 구조를 만들 수 있다.
또한, 사용자가 페이지 간 이동할 때는 클라이언트 사이드 렌더링(CSR) 방식으로 브라우저에서 처리되므로, 단일 페이지 애플리케이션(SPA)의 장점도 유지할 수 있다.
SSR : 요청이 올 때 마다 해당하는 HTML 문서를 그때 그때 생성하여 반환한다. SSR을 사용하면 각 요청에 대해 서버에서 HTML 페이지를 생성하여 초기 렌더링에 필요한 모든 데이터와 마크업을 포함할 수 있다. 이는 애플리케이션의 인지 성능을 향상시키고 검색 엔진이 콘텐츠를 쉽게 크롤링하고 인덱싱할 수 있도록 한다.
SSG : HTML을 빌드 타임에 각 페이지별로 생성하고 해당 페이지로 요청이 올 경우 이미 생성된 HTML 문서를 반환한다. SSG를 사용하면 HTML 페이지가 빌드 시간에 생성되고 정적 에셋으로 제공되어 각 요청마다 서버 사이드 렌더링이 필요하지 않게 된다. SSG는 콘텐츠가 많은 웹사이트나 업데이트 빈도가 낮은 애플리케이션에 적합하며, 빠른 로딩 시간과 효율적인 캐싱을 가능하게 한다.
🔹 - 왜 React와 함께 사용하나요?
1. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능SSR과 SSG는 Next.js의 가장 큰 강점이다. SSR은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 생성해 전달하므로 초기 로딩 속도가 빠르고 SEO에 유리하다. SSG는 빌드 시점에 HTML 파일을 미리 생성하여 사용자가 즉시 콘텐츠를 확인할 수 있게 해준다. 반면에 React 단독 사용 시에는 기본적으로 클라이언트에서 렌더링이 이루어져 SEO 최적화가 어렵고, 초기 로딩 속도가 느릴 수 있다. SEO가 중요한 프로젝트라면 Next.js의 SSR, SSG 기능이 큰 도움이 된다.
2. 파일 기반 라우팅 시스템접기/펼치기Next.js는 파일 구조를 기반으로 페이지 라우팅을 쉽게 구성할 수 있다. 개발자는 pages 폴더에 파일을 추가하는 것만으로 라우팅을 설정할 수 있어 개발 속도가 빠르고 코드의 가독성도 높아진다. 반면에 React에서는 라우팅을 위해 react-router-dom 같은 라이브러리를 별도로 설치하고 설정해야 한다. 이를 통해 얻는 유연성도 있지만, 라우팅 구조가 복잡해지기 쉬워 대규모 프로젝트에서는 코드 관리가 어려워질 수 있다. Next.js의 파일 기반 라우팅은 특히 페이지 수가 많은 웹 애플리케이션에서 유용하다.
3. 기본적으로 제공되는 API 라우팅Next.js는 API 라우팅을 기본으로 지원하여 서버 코드와 클라이언트 코드가 동일한 프로젝트 내에 함께 존재할 수 있다. 이 덕분에 API를 위한 별도의 서버를 구축할 필요 없이 간단한 서버 코드를 Next.js 내에 통합할 수 있다. React만 사용할 때는 별도의 백엔드 서버나 서버리스 함수가 필요하며, 이를 설정하고 관리하는 데 추가적인 시간과 노력이 든다. 작은 프로젝트나 서버 측 기능이 많은 웹 애플리케이션이라면 Next.js의 API 라우팅 기능이 훨씬 효율적이다.
4. 코드 분할 및 최적화Next.js는 페이지 단위로 코드 분할을 자동으로 처리하여 각 페이지에서 필요한 코드만 로드되도록 한다. 이 덕분에 페이지 로딩 속도가 빨라지고 사용자 경험이 향상된다. React만 사용할 경우에는 React.lazy와 Suspense를 사용해 직접 코드 분할을 설정해야 하며, 대규모 프로젝트에서는 설정이 번거로울 수 있다. Next.js는 코드 최적화를 자동으로 수행해 개발자가 더 나은 성능을 쉽게 얻을 수 있도록 돕는다.
> React와 Vue 이전 페이지 참고
