Discuss getStaticProps in brief

Question

Accepted Answer

`getStaticProps` is a special async function used in the Next.js Pages Router (`pages` directory) to fetch data at build time and pre-render pages as static HTML. It runs on the server-side during the build process, never on the client, and the resulting static files can be cached and served instantly via CDN. This method is essential for Static Site Generation (SSG), enabling you to create fast, SEO-friendly pages with data from external sources like CMS, databases, or file systems. It's important to note that `getStaticProps` is **not available in the App Router** - it has been replaced by Server Components and `generateStaticParams`. // pages/blog/index.js import Link from 'next/link'; export default function Blog({ posts }) { return (

Blog Posts

{post.title}

); } // This runs at build time, not on the client export async function getStaticProps() { // Fetch data from an API or CMS const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); // Return props that will be passed to the page component return { props: { posts, }, // Optional: revalidate every 60 seconds for Incremental Static Regeneration revalidate: 60, }; } Build-time Execution: Runs during `next build` to generate static HTML and JSON files that are served to users . Server-side Only: Code inside getStaticProps is never exposed to the client; you can safely write server-side logic like database queries . Static Generation: Creates static pages that can be cached on a CDN for optimal performance and reduced server load . Incremental Static Regeneration (ISR): By adding the `revalidate` property, you can update static content without rebuilding the entire site . Limited to Page Files: Can only be exported from files inside the `pages` folder, not from components or other files . getStaticProps is ideal for pages where the data is publicly available, can be fetched ahead of time, and doesn't change frequently or can be updated via ISR. Common use cases include blog posts, marketing pages, documentation sites, e-commerce product pages, and content from headless CMS platforms. It's not suitable for pages that require user-specific data or frequently changing content, where you'd want client-side fetching or server-side rendering with `getServerSideProps` instead . // pages/blog/[slug].js // For dynamic routes, combine with getStaticPaths export default function BlogPost({ post }) { return (

{post.title}

{post.content}

); } // Generate all possible paths at build time export async function getStaticPaths() { const res = await fetch('https://api.example.com/posts'); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: false }; } // Fetch data for each individual path export async function getStaticProps({ params }) { const res = await fetch(`https://api.example.com/posts/${params.slug}`); const post = await res.json(); return { props: { post }, revalidate: 3600, // Revalidate every hour }; } **getStaticProps → Server Component with generateStaticParams:** In the App Router, you simply fetch data directly in a Server Component, and use `generateStaticParams` for dynamic routes . **getStaticPaths → generateStaticParams:** The App Router version that returns an array of params for static generation . **revalidate → fetch options or segment config:** ISR is configured via `next: { revalidate }` in fetch calls or `export const revalidate` in page files . The App Router approach is more intuitive as you don't need separate data-fetching functions - you just write async Server Components .

Discuss getStaticProps in brief

getStaticProps is a Pages Router data fetching method that runs at build time to generate static pages with pre-fetched data

Discuss getStaticProps in brief

getStaticProps is a Pages Router data fetching method that runs at build time to generate static pages with pre-fetched data

Scenario Questions

Follow-up Questions