#20.5 Fallback

## 목표

- `getStaticPaths`  의 **`Fallback`** 옵션 종류를 알아보고, 각 종류별로 변수 페이지가 어떻게 생성 되는지 알아본다.

## 정리

### `[fallback: blocking](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking)`

1. `getStaticPaths`  의 path 에 비어있는 배열을 넘겨줘서 빌드시에는 미리 HTML 페이지를 생성하지 않는다.
2. 최초로 해당 페이지에 접근하는 사용자가 나타나면, HTML 파일을 생성한다.
    - 이때, 로딩 시간이 걸린다.
3. 이후에 해당 페이지에 접근하는 사용자들은 이미 생성된 HTML 파일을 볼 수 있다.

### `fallback: false`

- `getStaticPaths`에서 반환하지 않은 모든 경로는 404 페이지가 된다.
- 빌드 할 때 변수 페이지를 한 번만 만들고, 그 이후에는 만들지 않는다.

### `fallback: true`

- `fallback: blocking` 처럼 request 시점에 정적 변수 페이지를 생성한다.
- `fallback: blocking` 과 다른 점은,
    - `fallback: blocking` 는 해당 페이지에 최초로 접속한 사용자가 해당 페이지가 다운로드 되는 동안 아무것도 볼 수 없는 것에 반해서
    - `fallback: true` 의 경우, 해당 페이지가 최초 생성되는 동안 임시 페이지(Fallback page)를 보여줄 수 있다.
- Fallback pages

    ```tsx
    if (router.isFallback) {
    	return <div>Loading...</div>
    }
    ```

    - fallback이 렌더링되고 있는지 감지할 수 있다.
    - 렌더링 되는 동안 임의의 UI를 보여 줄 수 있다.
    - fallback은 최초 한 번만 이뤄지기 때문에, 정적 변수 페이지 생성 시에 한 번만 Fallback page를 볼 수 있다.

## 참고

### `fallback: false`

[Functions: getStaticPaths](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-false)

- fallback이 false인 경우 `getStaticPaths`에서 반환하지 않은 모든 경로는 404 페이지가 됩니다.
- next build가 실행되면 Next.js는 `getStaticPaths`가 `fallback: false`를 반환했는지 확인한 다음 `getStaticPaths`가 반환한 경로만 빌드합니다.
- 이 옵션은 생성할 경로가 적거나 새 페이지 데이터가 자주 추가되지 않는 경우에 유용합니다.

### `fallback: true`

[Functions: getStaticPaths](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-true)

- `fallback`이 `true`인 경우, 빌드 시 생성되지 않은 경로는 404 페이지를 생성하지 않습니다.
- 대신 Next.js는 이러한 경로에 대한 첫 번째 요청에서 페이지의 "fallback" 버전(`isFallback`)을 제공합니다.
- Google과 같은 웹 크롤러는 fallback 서비스를 제공하지 않으며 대신 경로는 `fallback: 'blocking'`과 같이 작동합니다.
- 백그라운드에서 Next.js는 요청된 경로 HTML 및 JSON을 정적으로 생성합니다.

### `[fallback: true`가 언제 유용합니까?](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#when-is-fallback-true-useful)

- `fallback: true`는 데이터에 의존하는 static 페이지가 많은 경우에 유용합니다(예: 매우 큰 전자 상거래 사이트).
- 모든 제품 페이지를 미리 렌더링하려면 빌드 시간이 매우 오래 걸립니다.

### Fallback pages

[Functions: getStaticPaths](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-pages)

- router를 사용하여 fallback이 렌더링되고 있는지 감지할 수 있습니다.
- fallback이 렌더링되고 있다면 `router.isFallback`은 `true`가 됩니다.

```tsx
// 페이지가 아직 생성되지 않은 경우 getStaticProps() 실행이 완료될 때까지 아래 로딩이 표시됩니다.
if (router.isFallback) {
	return < div>Loading...< /div>
}
```

### `[fallback: blocking](https://nextjs.org/docs/pages/api-reference/functions/get-static-paths#fallback-blocking)`

- `getStaticProps`나 `getStaticPaths`를 가지고 있는 페이지에 방문할 때,
    - 만약 그 페이지에 해당하는 HTML 파일이 없다면,
    1. `fallback: blocking`은 유저를 잠시동안 기다리게 만들고,
    2. 그동안 백그라운드에서 페이지를 만들어서 유저에게 넘겨줍니다.

### Node.js 터미널 명령어 한 번에 두 개 하기

- 세미콜론 기호(`;`) 로 구분하여, 한 줄에 두 개의 실행문을 입력 할 수 있다.

    ```tsx
    npm run build; npm run start
    ```

pages/products/[id].tsx

@@ -41,6 +41,14 @@ const ItemDetail: NextPage<ItemDetailResponse> = ({
     toggleFav({});
   };
 
+  if (router.isFallback) {
+    return (
+      <Layout title="Loaidng for youuuuuuu">
+        <span>I love you</span>
+      </Layout>
+    );
+  }
+
   return (
     <Layout seoTitle="Product Detail" canGoBack>
       <div className="px-4  py-4">
@@ -119,7 +127,7 @@ const ItemDetail: NextPage<ItemDetailResponse> = ({
 export const getStaticPaths: GetStaticPaths = () => {
   return {
     paths: [],
-    fallback: "blocking",
+    fallback: true,
   };
 };