Next.js 시작

Next.js

먼저 Next(이하 넥스트) 의 모든 페이지는 사전 렌더링 ( Pre - rendering ) 을 원칙으로 하고 있다. 이러한 사전 렌더링으로 더 좋은 퍼포먼스 , 검색엔진 최적화 가 가능하다는 장점이 있음.

이런 사전 렌더링은 두 가지의 형태가 있다

1. 정적 생성
2. SSR

두 형태는 html 파일의 생성 시기에 따라 두 형태를 구분하게 된다.

정적 생성

1. 프로젝트가 빌드하는 시점에 html 파일들이 생성된다.
2. 모든 요청에 빌드 파일을 재 사용
3. 넥스트의 경우 정적 생성을 퍼포먼스의 이유로 권고한다.
4. 정적 생성된 페이지들은 CDN의 캐시가 됨.
5. 만약 미리 만들어 놔도, 상관없는 페이지의 구성인 경우, getStaticProps , getStaicPaths 사용해서 정적생성

getStaticProps: 빌드 시 고정되는 값으로, 빌드이후에는 변경이 불가하다.

SSR

1. 반면에 SSR은 매 요청이 들어올 때마다 Html을 생성

2. 항상 최신 상태를 유지함
3. 요청에 다이나믹한 구조가 필요한 경우, getServerSideProps

getServerSideProps : 빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옵니다.

Next.js의 기능들

• 다이나믹 라우트를 이용한 직관적인 페이지 기반의 라우팅 시스템
• 자동으로 페이지를 최적화
• 데이터 요구사항 차단과 함께 서버에서 렌더링
• 빠른 페이지 로딩을 위해 자동으로 코드 스플릿팅
• 최적화된 페이지 프리페치를 사용한 클라이언트 라우팅
• HMR(Hot Module Replacement)을 지원하는 Webpack 기반의 개발 환경
  *페이지에 사용되는 것과 동일한 간단한 라우터를 사용하여 서버리스 기능으로 API를 구축하기 위한 API 라우트
• 커뮤니티 플러그인과 고유한 Babel 및 Webpack 구성으로 사용자 지정 가능