Next.js 튜토리얼 Pre-rendering and Data Fetching 간단 정리

Pre-rendering and Data Fetching

• 사전 렌더링

  Next.js 가 각 페이지의 HTML 을 미리 생성하는 것

  SEO 최적화

  생성된 HTML 은 페이지들에 필요한 최소한의 JS 코드와 연결됨

  페이지가 로드될 때 JS 실행되고 완벽히 상호작용 가능한 페이지를 만들어냄(Hydration)

  JS 없이도 앱 UI 볼 수 있게 해줌 (JS 비활성화로 확인)

  • SSG

    빌드 시 HTML 을 생성하고 생성된 HTML 을 재사용하는 방법

    CDN 서버 사용가능하므로 SSR 보다 빠름

    유저의 요청 전에 페이지 렌더링이 미리 필요할 경우 사용

    • 데이터 유무에 따른 SSG

      • 데이터 없을 시

        자동으로 앱이 프로덕션용을 빌드될 때 정적으로 생성

      • 데이터 있을 시

        getStaticProps 사용하여 비동기 처리

        프로덕션 빌드 시 getStaticProps 가 먼저 데이터 종속성 해결을 위해 먼저 실행된 뒤 나머지 빌드함

      • getStaticProps

        비동기 처리용 함수

        개발 모드에서는 각 요청마다 실행됨

        Page 컴포넌트에 props 로 전달됨

        외부 API 가져오거나 DB 쿼리 날릴 때 사용(서버 사이드에서 동작하기 때문에 가능)

        Page 에서만 허용됨 (React 가 요청된 페이지를 렌더링 하기 전에 필요하기 때문)

  • SSR

    각 요청마다 HTML 을 생성하는 방법

    페이지가 최신 내용을 보여주고 매 요청마다 페이지 내용이 바뀔 수 있을 경우 사용

    getServerSideProps 로 비동기 처리

    getStaticProps 보다 느리고 특별한 설정 없이 CDN 에 의해 결과 캐시될 수 없음

• CSR

  데이터 사전렌더링 필요없을 시 사용됨

  정적으로 생성되는 부분은 사전 렌더링 하고 동적인 부분은 클라이언트에서 처리하는 방법 사용됨

• SWR

  데이터 가져오기 위한 React 훅

  클라이언트 사이드에서 데이터 가져올 때 추천됨

  캐싱, 재확인, 포커스 트래킹, 주기적으로 다시 가져오기 등 핸들링할 때 유용