[NEXTJS] NEXTJS 알아보기(1)

간단하게 NEXTJS에 대해서 알아보려고 합니다.

공식문서를 참고하여 작성하였습니다.

 

✔ NEXTJS란?

  React의 SSR를 쉽게 구현할 수 있게 도와주는 프레임워크 입니다.

 

✔ 특징

  폴더 및 파일 기반으로 라우팅을 지원하여 직관적임 (동적 경로 라우팅 지원)

  정적생성(Static Generation) 및 서버 사이드 랜더링 그리고 클라이언트 사이드 렌더링까지 각각의 페이지에 맞게 지원

  코드 스플릿팅을 통해 Page의 빠른 로드 지원

  컴파일과 번들링도 자동으로 진행

  자동 리프레쉬 기능 지원

  커스텀 API를 쉽게 구성 가능

  static 파일 지원 - public 디렉토리

 프리패칭 지원 - 서버에서 불러다가 오는것

설치 : create-next-app

 

[정적생성]

- 프로젝트를 빌드하는 시점에 html 파일을 생성

- 모든 요청에 재사용됨

- 퍼포먼스의 이유로 nextJs는 정적 생성을 권고

- 정적 생성된 페이지들은 CDN에 캐시되서 빠르게 확인 가능

- getStaticProps / getStataicPaths를 활용

 

[SSR]

- 매 요청마다 서버에서 html를 생성

- 항상 최신 상태를 유지

- getServerSideProps 활용

 

// prefetch : 백그라운드에서 필요한 뷰포트들을 가져와서 스테틱한 파일을 바로바로 만들어 버리는 것 디폴트 트루

// 처음로딩하는 화면의 경우에는 에러창을 뱉어내다가 백그라운드에서 뷰포트를 생성해버리면 그때부터 정상적으로 로딩됨

 

✔ getInitialProps

CSR에서 ComponentDidMount나 useEffect를 통해 구성했던 것과 마찬가지로

각 페이지마다 미리 불어와야할 데이터를 서버에서 미리 처리하는 로직을 구성하는데 도움을 준다.

 

const ChangePassword: NextPage<{ token: string }> = ({ token }) => {
    return <div>token is {token}</div>;
};

ChangePassword.getInitialProps = ({ query }) => {
    return {
        token: query.token as string,
    };
};

 

 

우선 getInitialProps에서 기본적으로 받는 props를 ctx라고 하며 ctx는 pathname, query, asPath, req, res, err 를 가진다.

그 중 우린 query를 사용한 예제로 위와 같이 사용법은 간단하다.