Next.js
-
성능 (Performance):
- 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG) 기능을 제공 하여 초기 로드 시간을 단축
- 코드 스플리팅 및 이미지 최적화와 같은 기능으로 런타임 성능을 향상📌 Next.js는 코드 스플리팅을 기본으로 지원해서 React에 비교해 초기 웹 페이지 로딩이 빠르다.
- 각 컴포넌트를 별도 Javascript 번들로 분리
- 사용자가 어떤 페이지에 방문할 때 (어떤 컴포넌트를 볼 때) 필요한 부분만 로드하도록 보장하고 나머지 부분은 필요에 의해서 로딩.
- ‘프레임워크’인 Next.js는 이런 부분을 개발자가 신경 쓰지 않아도 알아서 다 해준다.
=> 우리가 애플리케이션 자체의 구조 설계와 비즈니스 로직 구현에 집중할 수 있게 해줌. - TTV 향상되고, 특정 페이지에 오류가 있어도 나머지는 작동
-
SEO (Search Engine Optimization):
- 서버 사이드 랜더링을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 랜더링 되므로,
검색 엔진이 콘텐츠를 쉽게 인덱싱할 수 있다. - 정적 사이트 생성으로 미리 생성된 HTML 파일을 제공하여 SEO 성능을 극대화.
- 서버 사이드 랜더링을 통해 웹페이지의 콘텐츠가 초기 로드 시 완전히 랜더링 되므로,
-
개발자 경험 (Developer Experience):
- 자동 코드 분할 (Automatic Code Splitting), 핫 리로딩 (Hot Reloading), 타입스크립트 지원 등 개발자가 생산성을 높일 수 있는 다양한 기능을 지원.
- API 라우트 기능으로 백엔드와의 통합을 쉽게 하고, 환경 설정이 적은(configuration-less) 개발 환경을 제공.
-
확장성 (Scalability):
- 서버리스 함수와 데이터 페칭 기능을 활용해 유연한 확장성 제공.
- 서버리스 함수와 데이터 페칭 기능을 활용해 유연한 확장성 제공.
-
유연성 (Flexibility):
- React와 완전히 호환되며, 원하는 다양한 툴 및 라이브러리와 함께 사용할 수 있다
장점
1. 유용한 기법 제공
- (1) 렌더링 방식(Rendering)
기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG 등을 가능케 함 - (2) 코드 스플리팅(Code splitting)
2. 쉬운 서버 로직 개발
API Route,server action등을 지원하여 아주 가벼운 서버 개발이 가능하도록 한다.
다만, 뚜렷한 한계점은 있다.
- 복잡한 백엔드 로직은 아직 구현이 불가 : WebSocket, WebRTC 등
- WebSocket, WebRTC란?
- 실시간 통신을 위해 설계된 기술. 채팅이나 화상 회의, 파일 공유 등에서 사용된다. HTTP와 비교했을 때 엄청나게 효율적인 실시간 통신을 제공.
- WebSocket, WebRTC란?
- FE 로직과의 종속성 : 백엔드 로직만 변경해서 배포해야 하면 프론트엔드도 함께 배포해야 함
- 프론트엔드 서버의 부하 증가
- 복잡한 백엔드 로직은 아직 구현이 불가 : WebSocket, WebRTC 등
3. 매우 쉬운 배포
- Next.js는 Vercel에서 만든 만큼 배포가 굉장히 쉽다.
- Full Stack 애플리케이션의 배포 프로세스
- 전통적인 방법
- 프론트엔드 : vercel
- 백엔드 : aws ec2
- Next.js를 사용하면 : vercel로 일괄 배포
- 전통적인 방법
