Next.js 4-2. getStaticPaths

4. fallback: 'blocking'

  fallback이 'blocking'인 경우 getStaticPaths에 의해서 반환되지 않은 새로운 경로는 SSR과 동일하게 HTML을 기다린 다음 생성된다. 그리고 경로당 한 번만 발생하도록 향후 요청을 위해 캐시 된다. 그리고 getStaticProps는 다음과 같이 동작한다.

  getStaticPaths에서 반환된 경로는 getStaticProps에 의해서 빌드 시 HTML에 렌더링 된다. 그리고 빌드 시 생성되지 않은 경로라도 404 페이지를 생성하지 않는다. 대신에 Next.js는 첫 번째 요청에서 SSR을 수행하고 생성된 HTML을 반환한다.

  그리고 완료되면 브라우저는 생선도니 경로에 대한 HTML을 수신한다. 사용자의 관점에서 볼 때 '브라우저가 페이지를 요청하고 있습니다'에서 '전체 페이지가 로드되었습니다'로 전환되는 것이다. 이것은 loading/fallback state의 플래시가 아니다. 

  동시에 Next.js는 사전 렌더링된 페이지 목록에 이 경로를 추가한다. 동일한 경로에 대한 후속 요청은 빌드 시 사전 렌더링된 다른 페이지와 같이 생성된 페이지를 제공한다.

  fallback: 'blocking'은 기본적으로 생성된 페이지를 업데이트하지 않는다. 생성된 페이지를 업데이트하려면 fallback: 'blocking'과 함께 증분 정적 재생성(ISR)을 사용해야 한다.

 

 

• Fallback 페이지

  페이지의 props는 비어있다. route를 사용하면 fallback이 렌더링 되고 있는지 감시할 수 있고, router.isFallback이 true가 될 것이다. 아래의 예제는 isFallback을 사용하는 방법을 보여준다.

// pages/posts/[id].js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()
  
  // 페이지가 아직 생성되지 않은 경우 표시된다.
  // 처음에 getStaticProps()가 실행을 마칠 때까지이다.
  if (router.isFallback) {
    return <div>Loading...</div>
  }
  
  // Render post...
}

// 이 함수는 빌드 시 호출된다.
export async function getStaticPaths() {
  return {
    //빌드 시 '/posts/1'과 '/posts/2'만 생성된다.
    paths: [{ params: { id: 'a' } }, { params: { id: '2' } }],
    
    // 예를 들어 '/posts/3'와 같이 정적으로 추가 페이지 생성을 활성화 할 수 있다.
    fallback: true,
  }
}

// 이 함수도 빌드 시 호출된다.
export async function getStaticProps({ params }) {
  // params는 post 'id'를 포함한다.
  // router가 /posts/1과 같으면 params.id는 1이다.
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()
  
  return {
    props: { post },
    // 만약 요청이 들어오면 게시물을 초당 한 번 다시 생성한다.
    revalidate: 1,
  }
}

export default Post

 

 

• TypeScript에서 getStaticPaths 사용하기

  Typesciprt의 경우 GetStaticPaths from 'next'를 통하여 타입선언을 사용할 수 있다.

import { GetStaticPaths } from 'next'

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}