Next.js의 장점 및 사용이유

이 글에서는 많은 사람들이 Next.js를 사용하는 이유, 즉 Next.js가 가지고 있는 강점에 대해서 정리해보고자 합니다.

 

 

What is Next.js?

가장 먼저, Next.js는 무엇일까요? 

What is Next.js

Next.js 공식 홈페이지에서도 언급하듯이, Next.js는 React의 Framework입니다. 
React를 이용하다보면, Routing과 같이 개발자들이 직접 개발해야 하는 필수적인 기능들이 있습니다. 이렇게 React를 이용할 때 필수적으로 개발해야 하는 기능들을 기본적으로 제공해주는 것이 바로 Next.js가 하고 있는 역할입니다. 

 

 

What kind of features Next.js can give  you?

그렇다면, 정확하게 어떠한 기능들을 Next.js는 제공해주고 있을까요?

 

1. File-based Routing

일반적으로 React 앱을 만들게 되면 Routing을 할 때 React Router 라는 것을 이용하여 처리하게 됩니다. 

Routing 이란?
URL을 확인하여, URL이 변경될 때, 브라우저가 기본적으로 서버로 보내는 요청을 미연에 방지하고, 
React를 통해서 페이지상에 다른 콘텐츠(컴포넌트)를 렌더링 하는 것을 의미합니다.. 

즉, 서버에 추가적인 요청을 보내지 않고, URL에 기반하여 페이지에 보여지는 컴포넌트를 변경하는 것입니다.

 

이때, React에서는 Routing을 설정하기 위해서는 따로 관련된 코드를 작성해줄 필요가 있습니다. (당연하게도...)

하지만, Next.js에서는 더 이상 따로 코드를 작성할 필요 없이 pages라는 폴더안에 폴더로 구분하면 중첩라우팅, 동적 라우팅과 같이 모든 라우팅 기능을 코드 작성없이 구현할 수 있습니다.

 

---

 

2. SSR (Server Side Rendering)

많은 사람들이 아시다시피, React는 기본적으로 CSR(Client Side Rendering)방식으로 동작합니다. 
물론 SSR방식으로 설정하는 방식이 존재하지만, 이는 매우 번거롭고 꽤나 복잡한 절차를 요구합니다. 
하지만, Next.js에서는 기본적으로 SSR방식으로 작동하기에 따로 이러한 복잡한 코드를 작성할 필요가 없어지게 됩니다. 

더불어 Next.js에서는 React의 SPA(Single Page Application)의 특징과 SSR의 특징을 동시에 가지게 됨으로써 UX성능을 높이면서도SEO(Search Engine Optimization, 검색최적화 - SSR의 장점 중 하나)도 할 수 있다는 것이 매우 큰 장점이게 됩니다.

 

 

SSR vs CSR ??? 

두 렌더링 방식에 대해 간략히 짚고 넘어가도록 해보겠습니다.

먼저, SSR같은 경우, 이름에서 알 수 있듯 Server쪽에서 모든 것을 렌더링 한 이후 클라이언트에 렌더링 된 코드를 보내주게 됩니다. 
따라서 SSR방식에서는 초기 렌더링 때 브라우저가 JavaScript코드를 따로 실행 시켜주는 과정이 불필요 해지는 것입니다. 

 

반면, CSR의 경우, Client쪽에서 렌더링 과정이 일어나게 됩니다. 

따라서 서버는 클라이언트에 뼈대만 있는 HTML파일과 JS파일을 제공하고, browser가 JS파일을 실행시켜 렌더링을 하게 됩니다. 

 

 

---

3. Fullstack Capabilities

Next.js는 frontend 뿐만 아니라, 매우 손쉽게 backend 코드도 작성 할 수 있는 기능을 제공하고 있습니다.

이 말은, Next.js 단 하나의 프로젝트 안에서 DB에 접근하여 CRUD를 할 수 있다는 것을 의미합니다.