Fetch data at build time
export async function getStaticProps(context: {params, preview, previewData}) { return { props: {}, // Page Component의 Props로 전달되는 객체 } }
해당 메소드는 번들링(빌드) 단계에서 데이터 패칭이 이루어짐 - 당연히 동적으로 작동하지 않는다
// getStaticProp()에 의해 빌드시에 게시물이 채워집니다. function Blog({ posts }) { return ( <ul> {posts.map((post) => ( <li>{post.title}</li> ))} </ul> ) } export async function getStaticProps() { // 외부 API endpoint로 Call 하여 Post 정보를 가져옵니다. const res = await fetch('https://.../posts') const posts = await res.json() // posts 데이터가 담긴 prop를 빌드시간에 Blog 컴포넌트에 전달합니다. return { props: { posts, }, } } export default Blog