Next를 사용해야 하는 이유

Next를 사용해야 하는 이유❔

❕ 사전 렌더링(Pre-Rendering)

: 페이지를 불러오는 속도가 훨씬 빨라지며 미리 페이지를 만들어두기 때문에 SEO(검색엔진최적화)에 큰 도움을 준다.

• 리액트는 기본적으로 클라이언트 컴포넌트를 사용하고 있다. 리액트는 순수한 클라이언트 사이드 라이브러리로 서버에서는 오직 하나의 HTML 파일과 자바스크립트 코드만을 내려주고 클라이언트 측에서 코드를 실행한다. 그러나 Next.js는 서버 컴포넌트이며 모든 리액트 컴포넌트들이 서버에서 렌더링된다.

• 서버 컴포넌트를 사용하면 다운로드해야 하는 클라이언트 측의 자바스크립트 코드가 줄어들 수 있어 웹 사이트의 성능을 향상시킬 수 있다. 또한 웹 검색 크롤러들은 완성 컨텐츠를 포함하는 페이지들을 볼 수 있기 때문에 SEO(검색엔진최적화)에도 좋다.

• Next.js에서 eventhandler를 다루거나 useState나 useEffect와 같은 훅은 서버 측에서는 사용이 불가하기 때문에 클라이언트 측에서 사용하기 위해 컴포넌트 최상단에 "use client"라는 지시어를 사용해 클라이언트 컴포넌트임을 명시하면 된다.

❕ 자동 코드 분할(Code-Splitting)

: 각 페이지별 필요한 코드들을 작은 청크로 프로그램의 번들을 분할하는 과정 > Next가 자동 코드 분할 지원 (페이지를 실행하는데 꼭 필요한 코드만 가져오도록 초기 로딩 시간을 향상시킬 수 있다. 즉 lazy loading을 가능하게 하여 사용자에게 훨씬 향상된 성능을 제공할 수 있다.)

❕ API Routes 지원

❕ 자동 최적화(Built-in Optimization)

: 자동으로 이미지, 폰트, 스크립트 등 여러 기능을 최적화 해줌으로써 개발 생산성 향상되고 더 나은 유저 경험과 성능 향상이 가능해진다.

❕ 미들웨어(Middleware)

❕ Routing & Layout

: 기존 React에서는 React-router-dom이라는 라이브러리를 사용해 직접 라우팅을 설정해주어야 했지만 next에서는 파일 시스템을 기반으로 라우팅을 하기 때문에 폴더 경로에 따라 라우팅이 설정이 되어 앱 구축을 하는데 빠르고 관리가 편리하다.
또 13version부터 각 페이지마다 공통된 레이아웃을 Layout이라는 파일에 하나만 설정해주면 전체적으로 Layout 적용이 가능하다.

대표적인 함수 3가지

- getStaticProps

정적 페이지 생성을 위한 데이터 가져오기 함수로 런타임이 아닌 빌드 타임에서만 실행 되므로 변동이 거의 없는 데이터 대상으로만 적용하는 것이 좋다.
(ex. FAQ의 글 목록)

export async function getStaticProps () {
   const posts = await fetchPosts();
   return {
      props: {
         posts,
      },
   };
}

- getStaticPaths

동적 경로를 위한 정적 경로 생성 함수. 동적으로 생성되는 페이지를 사전 렌더링할 때 사용
(ex. 하나의 FAQ 데이터가 존재한다고 했을 때 faqs/1 이라는 경로를 빌드 타임에 미리 사전 렌더링 할 수 있음)

export async function getStaticPaths () {
   const paths = await fetchDynamicPaths();
   return {
      paths,
      fallback : false,
   };
}

- getServerSideProps

서버 사이드 렌더링을 위한 데이터 가져오기 함수. 매 요청마다 데이터를 서버에서 가져옴
(ex. 자주 업데이트 되는 posts 데이터들을 외부 API로부터 fetch 해서 사전 렌더링 하고 싶을 때 사용)

export async function getServerSideProps () {
   const data = await fetchData();
   return {
      props: {
         data,
      },
   };
}