Pages Router Data Fetching: getServerSideProps vs getStaticProps

1// pages/products/[id].tsx (Pages Router convention)
2import { GetStaticProps, GetStaticPaths } from 'next';
3
4interface ProductPageProps {
5  product: { id: string; name: string; price: number };
6}
7
8export default function ProductPage({ product }: ProductPageProps) {
9  return (
10    <div>
11      <h1>{product.name}</h1>
12      <p>${product.price}</p>
13    </div>
14  );
15}
16
17// 1. Define pre-generated paths at build time
18export const getStaticPaths: GetStaticPaths = async () => {
19  return {
20    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
21    fallback: 'blocking', // SSR on first request if path is ungenerated
22  };
23};
24
25// 2. Fetch data at build time + background ISR revalidation
26export const getStaticProps: GetStaticProps<ProductPageProps> = async (context) => {
27  const { id } = context.params!;
28  const product = await fetchProduct(id as string);
29
30  return {
31    props: { product },
32    revalidate: 60, // ISR: Revalidate in background every 60 seconds
33  };
34};