Next.js

Next.js 개념에 대한 짧은 문답

Next.js 개념에 대한 짧은 문답
  1. Next.js에서의 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)의 차이점은 무엇인가요?
      • SSG - 정적 사이트 생성 : 빌드 시점에 HTML 파일을 생성해 클라이언트에게 제공, 빠른 로딩속도와 SEO 친화적이며, CDN을 통해 캐싱 가능
      • SSR - 동적 데이터 처리에 적합 : 클라이언트의 요청 시점에 서버에서 새로운 HTML 파일을 생성하여 클라이언트에게 제공. SEO 친화적
 
  1. Next.js 의 ISR 에 대해 설명해주세요.
      • Incremental Static Regeneration (ISR)은 Next.js에서 사이트의 정적 페이지를 빌드 시간에 미리 생성하는 대신, 요청에 따라 개별 페이지를 "재생성"하는 방식
      • SSG의 성능 이점과 SSR의 실시간 데이터 반영 이점을 동시에 누릴 수 있음.
      • getStaticProps 함수에 revalidate : n 속성을 설정하여 사용하고, n초마다 페이지가 새로운 요청에 의해 재생성
  1. Next.js의 API 라우트에 대해 설명해주세요. 어떻게 사용하나요?
      • Next.js의 API 라우트를 사용하면 서버리스 함수(Serverless Functions) 형태로 API를 구현할 수 있음.
      • pages/api 디렉토리에 파일을 생성하여 API 엔드포인트를 정의할 수 있으며, 각 파일은 하나의 API 엔드포인트에 대응됨.
      • API 라우트는 빌드 시점에 컴파일되어 서버리스 함수로 배포되며, 요청에 따라 동적으로 처리할 수 있음.
       
  1. Next.js에서의 코드 스플리팅과 레이지 로딩에 대해 설명해주세요.
      • 코드 스플리팅: 애플리케이션의 코드를 작은 청크로 분할하여 필요한 시점에 로드하는 기법. 초기 로딩 시간을 줄이고 성능을 향상시킬 수 있음.
      • 레이지 로딩: 사용자가 필요한 기능에 접근할 때 컴포넌트나 리소스를 로드하는 기법. 초기 로딩 시점에 모든 리소스를 로드하지 않고 필요한 시점에 로드하여 성능을 향상.
      • Next.js에서는 동적 import()를 사용하여 레이지 로딩을 구현할 수 있음.
       
  1. Next.js에서의 getStaticProps, getStaticPaths, getServerSideProps 함수의 사용 목적과 차이점을 설명해주세요.
      • getStaticProps : 빌드시정메 데이터를 가져와서 정적페이지를 생성 - SSG
      • getStaticPaths : 동적 라우팅을 사용하는 경우, 빌드 시점에 생성될 경로 목록을 사용하는데 사용
        • SSG에 사용되며 반환된 경로 목록에 따라 정적 페이지가 생성됨
      • getServerSideProps : 요청이 발생할 때마다 데이터를 가져와서 SSR을 수행하는데 사용. 반환된 데이터는 페이지의 props로 전달됨.