Next.js ?
React를 기반으로 만들어진 풀 스택(Full-Stack) 웹 프레임워크(Web Framework)
장단점
장점
- 풀 스택(Full-Stack) 개발이 가능하다.
- 프로그래밍에 필요한 전반적인 기능을 모두 제공하기 때문에 개발자가 기능 구현에만 집중할 수 있다.
- Vercel을 사용하여 FE(Front-End)와 BE(Back-End)를 한꺼번에 배포할 수 있다.
단점
- BE 로직이 FE 로직에 종속되어 있어서, BE를 배포할 땐 FE를 함께 배포해야 한다.
- 실시간 통신(ex. WebRTC, WebSocket) 등의 복잡한 BE 로직은 아직은 구현이 어렵거나 불가하다.
주요 기능
| 기능 | 예시 |
|---|---|
| 다양한 렌더링/Data Fetching 기법 | SSG, ISR, SSR, CSR |
| 디렉토리 구조 기반 라우팅(Routing) | App Router, Pages Router |
| 스타일링(Styling) | CSS, Sass, CSS-in-JS |
| Web Request/Response Handler 커스텀(Custom) | Route Handler |
| 최적화, 번들링(Bundling) | 코드 스플리팅(Code Splitting), 이미지 최적화, 웹팩(Webpack) 설정 등 |
HMR(Hot Moudle Replacement)
애플리케이션이 실행 중인 상태에서 특정 모듈의 변경사항을 실시간으로 추가/변경/제거 하는 기법
(모듈 전체를 다시 로드하지 않음)
코드 스플리팅(Code Splitting)
웹 페이지의 로딩 시간을 줄이는 기법
TTV (Time To View): 사용자가 웹 브라우저의 최초 View를 볼 수 있기까지의 시간
기존 방식
- 웹 페이지의 전체 코드를 한번에 다운로드 받아서 출력한다.
문제
- 사용자가 방문하지 않는 페이지까지 모두 다운로드 받은 이후에 출력되기 때문에, 사용자가 최초 View를 볼 수 있기까지의 시간이 오래 걸린다.
해결 방법 : Code Splitting
- 사용자가 필요로 하는 부분만 우선적으로 로드(load) 하여 출력한다.
- 나머지 부분은 필요에 의해서만 로드(load) 하여 출력한다.
Next.js 의 6원칙
-
Out-of-the-box functionality requiring no setup.
: 별도의 설정 없이 바로 사용이 가능함 -
JavaScript everywhere, all functions are written in JavaScript.
: 모든 기능(FE, BE)을 JavaScript로 이용 가능함 -
Automatic code-splitting and server-rendering.
: Code Splitting을 자동으로 수행하고, 서버에서 렌더링이 가능함 -
Configurable data-fetching.
: Data-Fetching 로직을 Customize할 수 있음 -
Anticipating requests.
: 사용자의 요구사항을 미리 예측함 -
Simplifying deployment.
: 배포를 쉽고 간단하게 함
쥐눈(Jin Hoon)