Next.js 특징 정리

Next.js: High-Quality 웹 애플리케이션

High-Quality란?

1. 성능
   • SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성)를 통해 초기 로드 시간 단축
   • 코드 스플리팅과 이미지 최적화로 런타임 성능 향상
   • 코드 스플리팅 예시*
   • import React, { Suspense, lazy } from 'react'; const LazyComponent = lazy(() => import('./LazyComponent')); function App() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> </div> ); } export default App;
2. SEO ->  Search Engine Optimization (웹사이트 검색 엔진 최적화)
   • SSR을 통해 초기 로드 시 완전히 렌더링된 콘텐츠 제공, 검색 엔진 인덱싱 용이.
   • SSG로 미리 생성된 HTML 파일 제공으로 SEO 성능 극대화
3. 개발자 경험:
   • 자동 코드 분할, 핫 리로딩, 타입스크립트 지원 등으로 생산성 향상
   • API 라우트 기능으로 백엔드 통합이 편함
4. 확장성:
   • 서버리스 함수와 데이터 페칭 기능으로 유연한 확장성 제공
5. 유연성:
   • React와 완전히 호환되며, 다양한 툴 및 라이브러리와 함께 사용 가능

프레임워크 vs. 라이브러리

• 프레임워크: 개발자가 기능 구현에 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원
  • 예: Vue.js, Angular.js
• 라이브러리: 공통 기능의 모듈화가 이루어진 프로그램의 집합
  • 예: React.js, react-router-dom, redux

라우팅

• React: 라우팅 제어는 개발자에게 맡겨짐 → 라이브러리.
• Next.js: 라우팅이 미리 정해져 있어 개발자가 간편하게 사용할 수 있음 → 프레임워크

Next.js 사용 이유

• 환경설정이 적은 (Configuration-less): 대부분의 웹 개발 기능을 기본으로 제공
• 유용한 기법 제공:
  1. 렌더링 방식: CSR에서 SSR, ISR, SSG로 전환 가능
     1. SSR -> Server Side Rendering
  2. 코드 스플리팅: 초기 로딩 시간을 단축시키고, 사용자에게 필요한 부분만 로드

TTV (Time To View)

• 사용자가 최초 뷰를 볼 수 있을 때 까지 시간으로, 짧을수록 사용자 만족도와 서비스 품질에 긍정적 영향을 줌

쉬운 서버 로직 개발

• API Route 및 server action 지원으로 가벼운 서버 개발 가능함 하지만 복잡한 백엔드 로직(예: WebSocket, WebRTC) 구현에는 한계가 있음

배포의 용이성

• Vercel에서 쉽게 배포 가능, Full Stack 애플리케이션의 통합 배포 지원\

Data fetching -> 외부에 있는 리소스를 가져올 때

• next.js에서는 기능이 좀 더 확장됨  여러 옵션을 통해 한 번만 값을 가져올지, 일정 주기별로 가져올지,지속적으로 계속 가져올지 결정 가능 -> 이는 SSR SSG ISR 과 밀접관 연관이 있음