155 asked

0

강의에서 다루지 않는 부분인데, SSR을 사용하는 중요한 이유중 하나 입니다.!

• 다이나믹 Routes 에서 channel / [id] 의 id 부분을 결정해야 합니다.

• id 1번에는 어떤 데이터를 가져와서 정적 페이지를 만들지

• id 2번에는 어떤 데이터를 가져와서 정적 페이지를 만들지를요.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    id: post.slug,
  }))
}

위 코드를 보시면 id 부분을 결정할 수 있는 특별함수 'generateStaticParams' 가 있습니다.

예를들어 posts가 1번부터 100번까지 나오면 총 100개의 static page가 만들어지겠죠!

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

참고 GPT 요약

Next.js의 App Router에서 동적 라우트에 페이지들을 동적으로 배포하기 위해서는 `generateStaticParams` 함수를 사용하여 빌드 시점에 동적 경로를 생성할 수 있습니다. 아래는 그 방법을 설명하는 예제입니다:

1. **폴더 구조 설정**:
   ```
   /app
     /products
       /[id]
         page.js
   ```

2. **`page.js` 파일 작성**:
   ```jsx
   export default function ProductPage({ params }) {
     return (
       <div>
         <h1>Product ID: {params.id}</h1>
       </div>
     );
   }
   ```

3. **`generateStaticParams` 함수 사용**:
   ```jsx
   export async function generateStaticParams() {
     const products = await fetch('https://api.example.com/products').then(res => res.json());
     return products.map(product => ({ id: product.id }));
   }
   ```

이렇게 하면 빌드 시점에 동적 라우트가 생성되어, 각 제품 페이지가 정적으로 생성됩니다. 자세한 내용은 [Next.js 문서](https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params)를 참고하세요.