[코드잇 풀스택 1기] - React - Next.js

React - Next.js ?

둘 다 자바스크립트 라이브러리/프레임워크로 주로 사용자 인터페이스 구축하는데 사용합니다.

 

차이점

1. 서버 사이드 렌더링 및 정적 사이트 생성

React :

1. 클라이언트 렌더링 방식으로 작동하여, 사용자가 웹 사이트를 방문할 때 모든 JS코드를 다운로드하여 브라우저에 렌더링 합니다.

2. 초기 로딩 시간이 느려질 수 있고, 검색 엔진 최적화 측면에 약함.

 

Next.js :

1. 기본적으로 서버 사이드 렌더링과 정적 사이트 생성을 지원합니다.

SSR은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 생성하여 전달, 정적 사이트 생성은 빌드 시 HTML을 생성하여 성능을 최적화합니다.

3. 로딩 속도를 개선하여, 검색 엔진 최적화 향상시키는데 유리.

 

2. 파일 기반 라우팅

React : 

라우팅 구현하기 위해 react-router와 같은 외부 라이브러리를 사용해야 합니다.

Next.js :

파일 시스템 기반 라우팅을 제공하여 pages 디렉토리에 파일을 생성하면 자동으로 라우트가 설정 됩니다.

 

3. 코드 스플리팅 및 번들링

React :

1. 코드 스플리팅을 직접 설정해야 하며, Webpack 등으로 번들링을 관리해야 합니다.

 

Next.js :

1. 페이지 단위로 자동 코드 스플리팅이 이루어지며, Webpack과 Babel 설정이 기본적으로 제공됩니다.

 

 

4. API 라우트

React :

API서버를 별도로 구현해야하고, express.js등의 백엔드 프레임워크를 사용해야 합니다.

 

Next.js :

pages/api 디렉토리를 통해 API 라우트를 쉽게 설정할 수 있어, 간단한 백엔드 로직을 동일한 프로젝트 내에서 구현 가능.

 

5. 이미지 최적화 및 기타 기능

React :

이미지 최적화나 기타 기능을 직접 구현하거나 외부 라이브러리를 사용

 

Next.js :

자동 이미지 최적화 기능을 제공, 이미지 로딩 속도를 개선하고 트래픽을 감소

---

결론 :

Next.js는 React의 장점을 유지하는 거 같다.

하지만 추가적인 기능으로 성능 향상이 되고, 개발하는 데에 큰 도움이 될 거 같다.