해결된 질문
24.07.06 21:25 작성
·
114
답변 1
0
2024. 07. 06. 21:36
강의에서 다루지 않는 부분인데, 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가 만들어지겠죠!
참고 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)를 참고하세요.
2024. 07. 06. 21:45
예를들어 posts가 1번부터 100번까지 나오면 총 100개의 static page가 만들어지겠죠!
말씀주셨는데요 ㅎ
그렇다면 처음에는 정적 페이지가 하나도 생성이 되지 않다가 사용자에 따라서 정적 페이지수가 증가하게 되나요 ?