Next js getStaticProps

Creator
Creator
Seonglae Cho
Created
Created
2021 Apr 22 4:49
Editor
Edited
Edited
2024 Mar 10 13:36
Refs
Refs
SSG
Next js getStaticProps revalidateion
Next js getStaticProps notFound

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
 
 
 
 
 
 

Recommendations