2024.10.02

Next.js 사용 이유

 

환경설정이 적은(Configuration-less) 개발환경

 

• 개발에만 집중할 수 있도록 프레임워크로서의 역할을 충실히 수행
• Next.js는 웹개발에 필요로 하는 거의 모든 기능을 디폴트로 가지고 있음
  유용한 기법 제공
• 렌더링 방식(Rebdering)
  기존 SPA 라이브러리에서 사용하던 CSR에서 벗어나 SSR, ISR, SSG 등을 가능케 함
• 코드 스플리팅(Code splitting)
  Next.js는 코드 스플리팅을 기본으로 지원해서 React에 비교해 초기 웹 페이지 로딩이 빠름
  • 웹 페이지 로딩 시간이 오래 걸리는 이유
    • 일반적인 웹사이트를 방문할 때는 해당 웹사이트 전체 코드를 한 번에 다운로드 받아서 처리
    • 방문하지 않는 페이지까지 다운로드 받아야만 하므로 오래 걸릴 수 밖에 없음
    • 사용자가 최초 View를 보기 위한 시간이 오래 걸림
      TTV: Time To View의 약자로써, 사용자가 최초 View를 볼 수 있을 때까지의 시간
      TTV가 짧으면 짧을수록 사용자가 더 빠르게 콘텐츠를 볼 수 있다. 사용자 만족도나 서비스의 전반적인 품질에 직접적인 영향을 주기 때문에 TTV를 줄이는 것은 성능 최적화의 주요한 지표 중 하나
  • Next.js 코드 스플리팅
    • 각 컴포넌트를 별도 Javascript 번들로 분리
    • 사용자가 어떤 페이지에 방문할 때(어떤 컴포넌트를 볼 때) 필요한 부분만 로드하도록 보장하고 나머지 부분은 필요에 의해서 로딩됨
    • '프레임워크'인 Next.js는 이런 부분을 개발자가 신경 쓰지 않아도 알아서 다 해줘 애플리케이션 자체의 구조 설계와 비즈니스 로직 구현에 집중할 수 있게 해준다.
    • TTV 향상되고, 특정 페이지에 오류가 있어도 나머지는 작동함
• 쉬운 서버 로직 개발
  • API Route, server action등을 지원하여 아주 가벼운 서버 개발 가능
  • 한계점
    • 복잡한 백엔드 로직은 아직 구현 불가: WebSocket, WebRTC 등
      WebSocket, WebRTC란
      모두 실시간 통신을 위해 설계된 기술. 채팅이나 화상 회의, 파일 공유 등에서 사용된다. HTTP와 비교했을 때 엄청나게 효율적인 실시간 통신을 제공
    • FE 로직과의 종속성: 백엔드 로직만 변경해서 배포해야 하면 프론트엔드도 함께 배포해야 함
    • 프론트엔드 서버의 부하 증가
• 매우 쉬운 배포
  • Next.js는 Vercel에서 만든 배포가 굉장히 쉽습니다.
  • Full Stack 애플리케이션의 배포 프로세스
    • 전통적인 방법
      • 프론트엔드: vercel
      • 백엔드: awa ec2
    • Next.js를 사용하면: vercel로 일괄 배포