Next.js 사용 이유

• 개발자가 개발에만 집중할 수 있도록 framework로서의 역할을 충실히 수행
• 위에서 살펴본 Next.js는 여러분이 필요로 하는 거의 모든 기능을 Default로 가지고 있습니다.

• Full Stack
  • API Route를 지원하여 full stack 웹 개발이 가능하도록 함
  • 작은 기업, 작은 프로젝트에서는 상당히 좋은 소식!
  • 유용한 기법 제공
  •  훨씬 더 많은 기법이 있지만, 여기에서는 대표적인 2가지를 보기로 하시죠
    • (1) 렌더링
    • 기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG등을 가능케 함
      
      • (2) 코드스플리팅
      • Next.js는 코드스플리팅을 default로 지원합니다. 
        • 웹 페이지 로딩 시간을 줄이기 위한 방법
        • 전통적으로 우리는
          • 일반적인 웹사이트를 방문할 때는 해당 웹사이트 전체 코드를 한 번에 다운로드 받아서 처리
          • 방문하지 않는 페이지까지 다운로드 받아야만 하므로 오래걸릴 수 밖에 없음
          • 사용자가 최초 View를 보기 위한 시간이 오래 걸림
          • 코드 스플리팅을 사용하면
            • 사용자가 필요로 하는 부분만 우선 로딩
            • 나머지는 필요에 의해서만 로딩
            • TTV 향상

• Data Fetching
  • 우리가 알고 있는 fetch 함수가 next.js에서는 좀 더 기능이 확장됐어요.
  • 여러 옵션을 통해 한 번만 값을 가져올지, 일정 주기별로 가져올지, 지속적으로 계속 가져올지 결정할 수 있어요.
  • 이 개념은 나중에 우리가 배울 SSR, SSG, ISR과 밀접한 연관이 있습니다.

 

• 배포
  • Vercel에서 제공하는 Next.js인 만큼 배포가 굉장히 쉽습니다.
  • Full Stack 애플리케이션의 배포 프로세스
    • 전통적인 방법
      • 프론트엔드 : vercel
      • 백엔드 : aws ec2
    • Next.js를 사용하면 : vercel로 일괄 배포