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 () => {
// ...
}
'Next.js' 카테고리의 다른 글
Next.js 5-1. ISR(Incremental Static Regeneration) (0) | 2023.04.25 |
---|---|
Next.js 4-3 getStaticPaths (0) | 2023.04.24 |
Next.js 4-1. getSaticPaths (0) | 2023.04.24 |
Next.js 3-2. getStaticProps (SSG) (0) | 2023.04.21 |
Next.js 3-1. getStaticProps (SSG) (0) | 2023.04.21 |