What is the difference between getStaticProps and getServerSideProps?

In the Next.js Pages Router, getStaticProps and getServerSideProps dictate data fetching and page caching behavior:

### 1. getStaticProps (Static Site Generation):

• Executes only at build time on the server (or incrementally via ISR revalidate).
• Produces static HTML and JSON files deployed to CDN edge caches.
• When to use: Content that is identical for all users (e.g. blog posts, documentation, marketing landing pages, technical interview guides).

export async function getStaticProps() {
  const data = await fetchQuestions();
  return { props: { data }, revalidate: 3600 }; // ISR every 1 hour
}

### 2. getServerSideProps (Server-Side Rendering):

• Executes on the server on every incoming HTTP request.
• Has access to the incoming request object (req), cookies, and query strings.
• When to use: Pages displaying sensitive user-specific data, real-time live feeds, or requiring authentication session validation before rendering.

export async function getServerSideProps(context) {
  const session = await getSession(context.req);
  if (!session) return { redirect: { destination: '/login' } };
  return { props: { user: session.user } };
}