getStaticProps
fetches data at build time for static generation:
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
revalidate: 3600, // ISR: revalidate every hour
};
}
function Blog({ posts }) {
return (
<div>
{posts.map(post => (
<article key={post.id}>{post.title}</article>
))}
</div>
);
}
Use when: Content is static or changes infrequently, for better performance and SEO.