Hasura 테이블 이벤트를 사용하여 주문형 Next.js 페이지(ISR) 재생성

Next.js 12.1의 새로운 기능은 Incremental Static Regeneration이며 이를 통해 필요에 따라 페이지를 만들고 업데이트할 수 있습니다. 이를 Hasura 테이블 이벤트와 페어링하여 웹 페이지를 항상 최신 상태로 유지하고 데이터가 변경될 때만 다시 빌드할 수 있습니다.

이를 확인하기 위해 예제 블로그 앱을 설정해 보겠습니다.

설정 하수라

1. Download the Hasura Docker Compose file.

2. Docker Compose graphql-engine 환경 변수 섹션에서 추가SECRET_TOKEN: <a random string you come up with>
3. Start Hasura and launch the console.

4. 데이터 탭에서 다음 열이 있는 새 테이블post을 생성합니다.

id 자주 사용되는 열의 UUID

title 텍스트 입력

content 텍스트 입력

5. API 탭에서 GraphQL 쿼리를 구성합니다.

{
  post {
    content
    id
    title
  }
}

Next.js 설정

1. 예시 Typescript Next.js 앱을 생성합니다npx create-next-app@latest --ts.

2. graphql-request을 사용하여 Hasura를 쿼리합니다. npm install graphql-request graphql로 설치

3. index.tsx에서 getStaticProps 데이터 가져오기를 설정합니다.

   import { request, gql } from "graphql-request";

   interface Props {
     posts: {
       id: string;
       title: string;
       content: string;
     }[];
   }

   const query = gql`
     {
       post {
         content
         id
         title
       }
     }
   `;

   export async function getStaticProps() {
     const { post: posts } = await request(
       "http://localhost:8080/v1/graphql",
       query
     );
     return {
       props: {
         posts,
       },
     };
   }

4. 마지막으로 블로그 게시물을 표시합니다.

   const Home: NextPage<Props> = ({ posts }) => {
     return (
       <main>
         {posts.map((post) => (
           <article key={post.id}>
             <h2>{post.title}</h2>
             <p>{post.content}</p>
           </article>
         ))}
       </main>
     );
   };

   export default Home;

증분 정적 재생성 설정

프로덕션 모드에서 Next.js를 실행할 때 Hasura에 새 블로그 게시물을 추가하면 Next.js는 이에 대해 알 수 있는 방법이 없습니다. 과거에는 증분 정적 재생성 전에는 revalidate time 을 설정해야 했습니다. 여기서 새 항목이 없더라도 x 시간마다 페이지를 다시 빌드해야 했습니다.

이제 데이터가 변경될 때 특정 페이지를 다시 빌드하도록 Next.js에 지시할 수 있는 웹후크를 설정할 수 있습니다! Following the Next.js on-demand revalidation guide:

1. Docker Compose를 설정할 때 SECRET_TOKEN 를 생각해 냈고 이를 Next.js와 통신하기 위한 암호로 사용합니다. .env.local 파일 생성

```env
SECRET_TOKEN=<Same as what you set in Docker Compose>
```

2. 재검증 API 경로를 생성합니다. 공식 예제와 유일한 차이점은 쿼리 변수 대신 헤더에서 비밀 토큰을 찾는 것입니다.

```typescript
// pages/api/revalidate.ts
// From Next.js docs https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#using-on-demand-revalidation
import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // Check for secret to confirm this is a valid request
  if (req.headers.secret !== process.env.SECRET_TOKEN) {
    return res.status(401).json({ message: "Invalid token" });
  }

  try {
    await res.unstable_revalidate("/");
    return res.json({ revalidated: true });
  } catch (err) {
    // If there was an error, Next.js will continue
    // to show the last successfully generated page
    return res.status(500).send("Error revalidating");
  }
}
```

3. Hasura 콘솔 이벤트 탭으로 돌아가서 이벤트 트리거를 생성합니다.

트리거 이름을 임의로 지정하고 게시 테이블을 선택한 다음 모든 트리거 작업을 선택합니다.

docker를 사용하는 경우 webhook 핸들러는 http://host.docker.internal/api/revalidate여야 합니다.

고급 설정에서 SECRET_TOKEN 환경 변수

의 SECRET 헤더를 추가합니다.

4. 이벤트 트리거를 저장하고 run Next.js in production mode

```bash
npm run build
npm run start
```

이제 Hasura에 게시물을 추가하고 Next.js 앱을 새로고침하면 업데이트된 데이터를 볼 수 있습니다!

소스 코드

Available on Github: https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/nextjs-incremental-
static-regeneration

The article was originally published on the Hasura blog - Regenerate Next.js Pages On-demand (ISR) with Hasura Table Events.