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

🚪 들어가며

 

React는 웹 애플리케이션 개발에서 널리 사용되는 라이브러리로, 컴포넌트 기반 아키텍처 덕분에 재사용성과 유지보수성이 높은 코드를 작성할 수 있습니다. 그러나 단일 페이지 애플리케이션(SPA)으로 동작하는 React는 몇 가지 한계를 가지고 있습니다. 이런 한계를 해결하기 위해 등장한 프레임워크가 바로 Next.js입니다. 이번 포스팅에서는 React만 사용할 때와 비교해 Next.js를 사용해야 하는 이유를 알아보겠습니다.

 

🎈 React의 특징과 장점, 한계

 

React의 주요 특징

React는 사용자가 인터페이스를 효율적으로 구성할 수 있도록 돕는 UI 라이브러리입니다. 이를 통해 복잡한 상태 관리와 컴포넌트의 재사용성을 극대화할 수 있습니다. 또한, 가상 DOM을 활용해 성능을 최적화하고, 사용자는 컴포넌트 간의 상태 변화에 따라 빠르게 반응하는 동적인 UI를 만들 수 있습니다.

 

React의 장점

• 빠른 렌더링 성능: 가상 DOM을 사용해 최소한의 업데이트만 DOM에 적용합니다.
• 컴포넌트 재사용: 모듈화된 컴포넌트를 통해 개발 속도와 유지보수가 용이합니다.
• 풍부한 생태계: 다양한 서드파티 라이브러리를 활용해 개발 생산성을 높일 수 있습니다.

 

React의 한계

• SEO 한계: 기본적으로 React는 클라이언트 사이드에서 렌더링되기 때문에 검색 엔진이 페이지를 크롤링하는 데 불리합니다.
• 초기 로딩 속도 문제: 대규모 애플리케이션의 경우 초기 로딩 시간이 길어질 수 있습니다.
• 라우팅과 SSR 지원 부족: React 자체는 라우팅 및 서버 사이드 렌더링(SSR)을 기본 제공하지 않습니다. 이를 위해서는 추가적인 설정과 코드 작성이 필요합니다.

 

📚 Next.js의 주요 기능

 

우선 Next.js는 무엇일까요? 공식문서에는 다음과 같아 표기되어 있습니다. 

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. 사용자 인터페이스를 만들기 위해 React 컴포넌트를 사용하고, 추가적인 기능과 최적화를 위해 Next.js를 활용합니다.
Next.js는 내부적으로 번들링, 컴파일링 등 React에 필요한 도구들을 추상화하고 자동으로 설정해 줍니다. 이를 통해 개발자는 설정에 시간을 들이지 않고 애플리케이션 구축에 집중할 수 있습니다. 
(출처: https://nextjs.org/docs)

 

요약하자면, Next.js는 React를 사용하는 프레임워크입니다. 이제 이것의 주요 기능에 대해 알아보겠습니다.

 

정적 사이트 생성(SSG)

Next.js는 정적 사이트 생성(Static Site Generation, SSG) 기능을 제공하여, 사전에 빌드된 정적 페이지를 생성할 수 있습니다. 이는 애플리케이션을 배포할 때 미리 HTML 파일을 생성하여 서버 요청 시마다 다시 렌더링할 필요가 없도록 하는 방식입니다. 정적 페이지는 서버 요청 없이도 즉시 제공되기 때문에 성능이 극대화되며, 특히 트래픽이 많은 경우 서버 부하를 크게 줄일 수 있습니다. 또한, 페이지가 미리 생성되므로 초기 로딩 속도도 매우 빠르며, 사용자는 서버 응답을 기다리지 않고 즉시 페이지를 볼 수 있습니다. 이 방식은 빌드될 때 한번만 렌더링되므로 콘텐츠가 자주 변경되지 않는 페이지에 특히 유용합니다.

 

 

서버 사이드 렌더링(SSR)

React.js는 CSR을 사용하여, 빈 HTML을 먼저 렌더링한 후 JavaScript로 Hydration을 처리하므로 초기 로딩 속도가 느려질 수 있습니다. 반면 Next.js는 기본적으로 SSR을 지원해 서버에서 미리 렌더링된 HTML을 클라이언트로 전달하므로, 초기 로딩 속도가 빠르고 SEO도 개선됩니다. 이 방식은 서버에 리퀘스트 요청이 있을 때마다 렌더링됩니다.

Hydration:  서버에서 미리 렌더링된 HTML에 클라이언트 측에서 JavaScript가 추가되어 상호작용이 가능하게 만드는 과정

 

 

자동 코드 분할 및 성능 최적화

Next.js는 자동 코드 분할(Automatic Code Splitting) 기능을 통해 페이지 단위로 자바스크립트 코드를 분할합니다. 이는 각 페이지가 필요한 코드만 로드하도록 하여, 불필요한 자바스크립트 파일이 한꺼번에 로드되는 것을 방지합니다. 예를 들어, 사용자가 특정 페이지를 방문하면 해당 페이지와 관련된 자바스크립트 파일만 로드되고, 다른 페이지의 자바스크립트 파일은 로드되지 않습니다.  이를 통해 불필요한 자원 낭비를 줄이고, 초기 로딩 속도를 크게 개선할 수 있습니다.

 

 

API Routes 기능

Next.js는 API 라우팅 기능을 제공하여 서버리스 API를 간편하게 구축할 수 있습니다. 이를 통해 백엔드 API 서버를 따로 구성하지 않고도 서버 기능을 구현할 수 있습니다.

 

 

📌 Next.js와 React의 비교

 

성능 차이

React는 클라이언트 사이드 렌더링(CSR) 방식으로 동작하므로, 초기 로딩 속도가 느려질 수 있는 단점이 있습니다. 이 과정에서 사용자는 콘텐츠가 렌더링되기 전까지 빈 페이지나 로딩 스피너를 볼 수 있어 사용자 경험이 저하될 수 있습니다. 특히 대규모 애플리케이션에서는 초기 로딩 시간이 더 길어질 수 있습니다.

 

반면, Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 기능을 통해 이러한 문제를 해결합니다. SSR을 사용하면 서버에서 HTML을 미리 렌더링해 클라이언트에 전달하므로, 사용자는 페이지를 즉시 볼 수 있고 이후에 JavaScript가 로드됩니다. SSG는 사전 빌드된 정적 페이지를 미리 생성해 두기 때문에 서버 부하가 적고, 페이지 로드 속도가 더욱 빠릅니다. 이러한 방식 덕분에 Next.js는 초기 렌더링 속도를 크게 개선하고, 특히 SEO에도 유리한 성능을 제공합니다.

 

 

개발 경험 차이

Next.js는 React의 기능을 확장하여 서버 사이드와 클라이언트 사이드를 모두 쉽게 다룰 수 있는 프레임워크입니다. 일반적으로 React는 클라이언트 사이드에서만 작동하므로, SSR이나 SSG와 같은 기능을 구현하려면 직접 설정하거나 추가적인 라이브러리를 사용해야 합니다. 그러나 Next.js는 이러한 기능을 기본적으로 내장하고 있어, 복잡한 설정을 따로 할 필요 없이 프로젝트를 손쉽게 시작할 수 있습니다.

 

또한, Next.js는 파일 기반 라우팅을 지원합니다. 파일 디렉토리 구조에 따라 페이지를 자동으로 생성해주기 때문에, React Router와 같은 라이브러리를 따로 설정하지 않아도 간편하게 라우팅을 처리할 수 있습니다. 특히 복잡한 라우팅 구조나 SEO 최적화가 중요한 프로젝트에서 Next.js의 이러한 기능이 매우 유용합니다. 서버 사이드에서 페이지를 미리 렌더링할 수 있어, 검색 엔진이 페이지를 더 잘 크롤링할 수 있기 때문입니다.

 

 

유지보수 측면

Next.js는 서버 사이드 렌더링, 정적 사이트 생성, 코드 분할 등 많은 기능을 기본적으로 제공하므로, 서드파티 라이브러리를 추가하지 않아도 대다수의 문제를 해결할 수 있습니다. 이는 프로젝트의 종속성을 줄이고 유지보수를 쉽게 만듭니다. 예를 들어, Next.js는 API Routes 기능을 통해 간단한 백엔드 API 서버를 직접 구현할 수 있으며, 이를 통해 서버리스 아키텍처를 손쉽게 구축할 수 있습니다.

 

반면, React로 같은 기능을 구현하려면 서버 사이드 렌더링을 위한 추가 설정, 라우팅 라이브러리, SEO 최적화를 위한 도구 등을 직접 설정해야 합니다. 이러한 요소들은 코드 복잡성을 높이고 유지보수 비용을 증가시킬 수 있습니다. Next.js는 이러한 기능들을 프레임워크에 통합해 개발자가 코드에 집중할 수 있는 환경을 제공하며, 업데이트나 버그 수정도 Next.js의 통합된 구조 덕분에 간편하게 처리할 수 있습니다.

 

 

🤔 항상 Next.js만 사용하면 될까?

 

React와 Next.js를 비교했을 때, 항상 Next.js를 사용하는 것이 유리한 것은 아닙니다. 두 기술은 각각의 장단점이 있으며, 프로젝트의 요구 사항에 따라 선택하는 것이 더 적절합니다.

 

React

• 유연성: React는 매우 유연하여 개발자가 원하는 방식으로 애플리케이션을 구성할 수 있습니다.
• 경량성: Next.js와 같은 추가적인 프레임워크 없이 필요한 기능을 직접 추가하거나 타사 라이브러리를 통해 관리할 수 있습니다.
• 클라이언트 사이드 렌더링(CSR): React는 CSR에 최적화되어 있으며, SPA로 빠른 사용자 경험을 제공할 수 있습니다.

 

Next.js

• 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG): Next.js는 서버에서 렌더링된 페이지를 제공하거나, 빌드 시 정적으로 생성된 페이지를 배포할 수 있어 검색 엔진 최적화(SEO)에 유리합니다.
• 라우팅 내장: Next.js는 파일 기반의 라우팅 시스템을 기본적으로 제공하여, 라우팅 설정이 더 간편합니다.
• 풀스택 기능: API 라우트를 제공하여 백엔드와 프론트엔드를 한 프로젝트에서 통합할 수 있습니다.

 

어떤 것을 선택해야 할까?

• 단순한 SPA 개발: 클라이언트 사이드 렌더링을 중심으로 하는 간단한 애플리케이션을 개발할 때는 React만으로도 충분할 수 있습니다.
• SEO가 중요한 프로젝트: 서버 사이드 렌더링 또는 정적 사이트 생성을 통해 SEO를 강화해야 하는 경우에는 Next.js가 더 적합합니다.
• 빠른 개발 환경이 필요한 경우: Next.js는 라우팅이나 빌드 최적화 같은 기능이 기본적으로 내장되어 있어, 초기 세팅이 간단하고 생산성이 높습니다.

따라서, 프로젝트의 성격과 요구 사항에 맞춰 React와 Next.js 중 적절한 기술을 선택하는 것이 중요합니다.

 

💡 결론

React는 여전히 훌륭한 라이브러리로, 단순한 SPA 개발에 적합합니다. 그러나 SEO가 중요한 웹사이트, 초기 로딩 속도가 중요한 애플리케이션, 그리고 서버 사이드 기능이 필요한 경우라면 Next.js가 더욱 적합합니다. Next.js는 React의 장점을 유지하면서도 그 한계를 보완하는 프레임워크로 더 나은 사용자 경험을 제공할 수 있습니다.