[Next.js] Next.js 에 대해서 알아보기 (기능, 한계점 등)

0311 ✍️

🔮 Next.js 의 기본 소개

 

 

Vercel에서 React.js를 기반으로 만든, 웹 개발을 위한 프레임워크
Route Handler를 통해 백엔드를 다룰 수 있어, 풀 스택 웹 개발이 가능

 

+ 여기서 프레임워크란?
개발자가 기능 구현에만 집중할 수 있게 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'으로,
별도의 셋팅을 개발자가 할 필요 없이 프레임워크가 다 알아서 해줘서 편리하게 개발할 수 있다!
 Ex )   Next.js, 혹은 JS기반 웹 FE SPA 프레임워크들인 Vue.js, Augular.js 등)

+ 이에 반해 라이브러리는
공통 기능의 모듈화가 이루어진 프로그램의 집합.
개발자의 별도 셋팅이 필요하며, 프레임워크보다 기능적으로 부족하다고 할 수 있다.

예를 들어, Routing 이라는 특정 기술을 구현하기 위해서는
React.js 와 같은 (UI를 만들기위한) 라이브러리에서는 별도로 react-router-dom 등을 설치해 routing 설정 코드를 작성해야하지만,
Next.js 와 같은 프레임워크에서는 이미 routing 셋팅이 되어있어서, 그냥 정해진 방법에 맞게 코드 작성만 해주면 routing을 사용할 수 있다. ( => 개발자가 아닌 프레임워크가 기술을 제어 - (IoC : Inversion of Control 제어의 역전)

 

🪄 Next.js 의 기능과 이점

• React.js가 가지고 있는 기능을 확장한 React 프레임워크
• 웹 애플리케이션 개발에 필요한 다양한 기능, 구조 제공 

1)   다양한 렌더링 기법  : 클라이언트 사이드 렌더링 CSR 뿐만 아니라, 서버 사이드 렌더링 SSR, SSG, ISR 가능해 ( => TTV가 짧다거나, SEO에서 유리하다는 장점 등)

2)   Routing : 파일(폴더) 기반 라우팅

3)   Route Handler : 백엔드 가능 (GET,POST,DELETE,PATCH와 같은 요청 가능한 백엔드 개발. 데이터 제공자로서의 백엔드 역할 수행 가능)

4)   스타일링 : CSS, Sass, CSS-in-JS, TailwindCSS 등 가능

5)   최적화, 번들링 : 코드 splitting, 이미지 최적화, 웹팩 설정 등을 해줌

 

 

 

🚨 Next.js 의 한계

1) Route Handler 통해 백엔드까지 다루는 풀스택 웹 개발이 가능하지만,
복잡한 백엔드 로직 구현은 아직 어렵다. (ex) WebSocket, WebRTC 등)

2) FE 로직에 대한 종속성 : 백엔드 로직만 변경해서 배포하고 싶다고 해도, 프론트엔드도 함께 배포해야

 

📜  Next.js의 간단한 History

    - 모든 연도 기록 X 생략된 부분 있습니다

  * 2016 : 깃허브 오픈소스 프로젝트로 첫 출시

 6가지 원칙 기반으로 개발
1. out-of-the-box functionality requiring no setup 별도의 셋팅없이
2. JavaScript everywhere 자바스크립트로 어디서든 쓰이게 + all functions are written in JavaScript
3. automatic code-splitting and server-rendering 코드 스플리팅, 서버 렌더링
4. configurable data-fetching   옵셔널하게 데이터 가져올 수 있도록 설정가능
5. anticipating requests 사용자가 원하는 것이 무엇인지를 먼저 예측 = 요구사항 예측
6. simplifying deployment 배포 쉽게

* 2020 :
Ver. 9.3   SSG, SSR뿐만 아니라, `ISR` (Incremental Static Regeneration - 일정 주기마다 데이터 갱신가능) 렌더링 패턴의 등장

* 2022 :
Ver. 13의 획기적인 등장!! `app route` 등장.  React ver.13에 등장한 `서버 컴포넌트` 적용 . `(nested) layouts` 등장. 

* 2023 :
Ver. 14 등장. 메모리관리 향상 (`edge runtime` - 전세계 여러 서버 중 사용자에게 가장 가까운 서버에서 실행하는 기술)