[nextJS] Next.js 개요

프레임워크?

: 개발자가 기능 구현에만 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 '기술의 조합'

• Spring Framework : Java 기반의 웹(백엔드) 프레임워크
• Vue.js, Angular.js : Javascript 기반 웹 프론트엔드 SPA 프레임워크
• Django, Flask : Python 기반의 웹 프레임워크
• Ruby on Rails
• .NET Framework
• Express.js, NextJS : Javascript 기반 웹 백엔드 프레임워크

 

라이브러리

: 공통 기능의 모듈화가 이루어진 프로그램의 집합

• React.js
• react-router-dom
• redux

 

React.js

공식홈페이지 : UI를 만들기 위한 라이브러리

그 자체만으로 프레임워크라 불리기엔 제공해야 하는 기능이 부족함

 

Next.js

공식홈페이지 : 웹 개발을 위한 React 프레임워크

React.js가 가지고 있는 기능을 확장

웹 애플리케이션 개발에 필요한 다양한 기능과 구조를 제공

 

 

왜 Next.js를 사용해야 하나?

1. 더 이상 어려운 설정은 그만 

개발자가 개발에만 집중할 수 있도록 framework로서의 역할을 충실히 수행

2. Full Stack

• API Route를 지원하여 full stack 웹 개발이 가능하도록 함
• 작은 기업, 작은 프로젝트에서는 상당히 좋은 소식

그러나, 뚜렷한 한계점

• 복잡한 백엔드 로직은 구현이 어렵거나 불가하다 : WebSocket, WebRTC 등
• FE 로직과의 종속성 : 백엔드 로직만 변경해서 배포해야 하면 프론트엔드도 함께 배포해야 함
• 그래서, 아직까지는 '완벽하게' 대체할 수 있다?라고 보긴 어렵다

 

3.유용한 기법 제공

(1) 렌더링

기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG등을 가능케 함

 

(2) 코드스플리팅

Next.js는 코드스플리팅을 default로 지원한다.

전통적으로 우리는

일반적인 웹사이트를 방문할 때는 해당 웹사이트 전체 코드를 한 번에 다운로드 받아서 처리

방문하지 않는 페이지까지 다운로드 받아야만 하므로 오래 걸릴 수밖에 없었다.

사용자가 최초 View를 보기 위한 시간이 오래 걸림

여기서 TTV의 개념이 나온다. 

Time To View의 약자로써, 사용자가 최초 View를 볼 수 있을 때까지의 시간을 이야기한다.

TTV가 짧으면 짧을수록 사용자가 더 빠르게 콘텐츠를 볼 수 있다. 사용자 만족도나 서비스의 전반적인 품질에 직접적인 영향을 주기 때문에 TTV를 줄이는 것은 성능최적화의 주요한 지표 중 하나로 채택된다.

 

코드 스플리팅을 사용하면 사용자가 필요로 하는 부분만 우선 로딩하고 나머지는 필요에 의해서만 로딩한다.

TTV 향상

code example : Suspense와 lazy를 이용한 코드 스플리팅 구현

Next.js는 이렇게 코드 스플리팅을 구현한다

각 컴포넌트를 별도 Javascript 번들로 분리

사용자가 어떤 페이지에 방문할 때(어떤 컴포넌트를 볼 때) 필요한 부분만 로드하도록 보장

'프레임워크'인 Next.js는 이런 부분을 개발자가 신경쓰지 않아도 알아서 다 해준다.

그래서 우리는 더욱 애플리케이션 자체의 구조설계와 비지니스 로직 구현에 집중할 수 있다.

 

4. Data Fetching

우리가 알고 있는 fetch함수가 next js는 좀 더 기능이 확장됨

여러 옵션을 통해 한 번만 값을 가져올지, 일정 주기별로 가져올지, 지속적으로 계속 가져올지 결정할 수 있다.

이 개념은 나중에 배울 SSR, SSG, ISR과 밀접한 연관이 있음

 

5. Easy 배포

Vercel에서 제공하는 Next js인 만큼 배포가 굉장히 쉬움

Full Stack 애플리케이션의 배포 프로세스

전통적인 방법

프론트엔드 : vercel

백엔드 : aw

 

지금의 Next.js가 있기까지

2016년

 

1. github 오픈소스 프로젝트로 첫 출시

2. 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

 

2017년

 

1. Next 2.0

2. 소규모 웹에서 쉽게 작업할 수 있도록 하는 개선사항

a. 빌드 효율성 높임

b. HMR 기능

  애플리케이션이 실행 중인 상태에서 특정 모듈의 변경사항을 실시간으로 교체

 

2018년

 

1. Version 7.0

2. 에러 핸들링 기능 강화

3. 향상된 Dynamic Route handling을 위한 React context API 지원

 

2020년

 

1. Version 9.3

2. SSG, SSR 뿐만 아니라, ISR(Incremental Static Regeneration)의 등장

3. Rewrite, Redirect 등장

 

2022년

 

1. Next.js 13 Version(Breaking Changes)

2. app route의 등장

3. React 18 버전에 등장한 Server Components 적용

4. (nested) layouts

5. Turbopack

 

2023년

 

1. 5월

a. Version 13.4

b. stable version of App Router

c. Production으로 사용 가능한 수준의 안정화

 

2. 10월

a. Version 14

b.메모리 관리 향상 (edge runtime)

edge runtime?

웹 애플리케이션의 일부분을 전 세계에 퍼져 있는 여러 서버 중 사용자에게 가장 가까운 서버에서 실행하는 기술을 말한다. 
한국에서 살고 있는 우리가 미국에 서버가 존재하는 웹사이트에 접속한다고 생각해보자. 웹사이트를 불러올 때, 우리의 요청은 한국에서 미국까지 가야 하고, 그 답변이 다시 미국에서 한국으로 돌아와야 한다.이 과정에서 당연하게도 물리적 거리 때문에 시간이 많이 걸릴 수 있다. 하지만, 만약 이 웹사이트가 “edge runtime” 기술을 사용한다면, 우리의 요청은 한국에 가까운 다른 서버에서 처리될 수 있다. 이렇게 되면, 웹사이트가 훨씬 빨리 불러와진다