Next.js 와 React.js 의 차이

Next.js를 사용함에 앞서 React.js 와 Next.js 의 차이에 대해 알아봅시다.

React.js 와 Next.js 는 두 가지의 큰 차이가 있습니다.

 

1. Framwork vs Library

React는 JavaScript 기반의 라이브러리이고 Next.js는 React 기반의 프레임워크입니다.

라이브러리와 프레임워크 궁극적인 차이는 "제어 흐름 주도권을 누가 가지고 있느냐" 입니다.

 

제어 흐름 주도권이란 무엇인가?

프레임워크는 개발자에게 응용 프로그램을 만들기 위한 뼈대를 제공하며, 제어 흐름을 프레임워크가 관리합니다.

그에 반해 라이브러리는 개발자가 필요한 기능을 호출하여 사용하며, 제어흐름은 개발자가 직접 관리해야 합니다.
다시 말해, 프레임워크(Next)는 제어권을 가지고 있지만 라이브러리(React)는 개발자가 직접 제어합니다.

React에서 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있기 때문에, Next는 Next의 규칙에 따라 코드를 작성하면 된다는 편의성을 가지고 있답니다.

 

 

2. CSR(Client-Side-Rendering) vs SSR(Server-Side-Rendering)

두번째는 렌더링 방식의 차이입니다.

React는 CSR(Client-Side-Rendering), Next는 SSR(Server-Side-Rendering) 방식입니다.

CSR과 SSR의 차이는 유저가 보는 화면(UI)를 어디서 만들어 주는지에 따라 구분할 수 있습니다.

CSR 같은 경우는 클라이언트 측에서, SSR은 서버 측에서 UI를 구성해 줍니다.

다음으로 CSR와 SSR의 각각의 장단점을 살펴보겠습니다.

1 ) React (CSR)

장점

• 초기 로드만 완료되면 이후 렌더링 속도가 빠르다
• 서버에 요청하는 것이 적어 서버에 대한 부담이 적다.

단점

• 초기 로드 속도가 오래 걸린다.
• 대부분의 검색 엔진의 봇은 HTML 파일만 크롤링 하기 때문에 HTML 파일이 비어있는 CSR 특성상 SEO에 좋지 못하다.

2 ) Next (SSR)

장점

• SEO에 좋다. (HTML 파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능)
• 초기 로딩 속도가 빠르다.

단점

• 서버에서 전체 앱을 미리 렌더링하기 때문에 컴포넌트 로딩이 오래 걸리면 유저는 빈 화면을 볼 수도 있다.
• 서버에 요청이 많기 때문에 서버 부하가 크다.

 

React, Next 는 각자의 장단점을 보유하고 있기 때문에 프로젝트 특성과 규모에 맞게 사용하면 좋을 것 같네요.

 

이 밖에, Next.js는 백엔드 개발이 가능하다는점 때문에 풀스택 프레임워크로 많이 사용됩니다.

여기서 키 포인트는 프론트엔드, 백엔드 개발에서 필요한 초기 보일러 플레이트 설정을 크게 줄여준다는 특성이 있습니다.

또한, 초기 설정이 필요한 경우 라우팅, 바벨, 웹팩, 미들웨어, SEO, SSR 등 많은 것들을 기본으로 제공해주니 Next 를 한번쯤 사용해보면 좋을 것 같습니다!

이상 Next와 React에 대해 알아보았습니다. 감사합니다!