🌐 Web & Full-StackVercel

Static Generation / SSG Improvements

Freshabout 19 hours ago

Mar 14, 20260 views

Confidence Score95%

95%

Problem

Summary Allow Next.js to become fully hybrid by providing methods to do both static generation and server-side rendering on a per-page basis. - Two new per-page data fetching methods - `getStaticProps` - Opt-in to static generation (SSG) at `next build` time. - `getServerSideProps` - Opt-in to server-side rendering (SSR) which renders on-demand. - A new method for statically generating (SSG) a set of routes from dynamic sources - `getStaticPaths` - Return list of parameters for dynamic routes to do static generation (SSG) This RFC exclusively discusses API additions. All new functionality is completely backwards compatible and can be incrementally adopted. This RFC introduces no deprecations. Background When building websites or web applications you generally have to choose between 2 strategies: Static generation (SSG) or server-side rendering (SSR). Next.js instead lets you build hybrid applications that allow you to choose per-page which strategy is used. Starting with Next.js 9, pages without `getInitialProps` get statically optimized and output as `.html` files upon `next build`. However, you might want to do data fetching while generating static pages for your specific use case. For example, to statically generate marketing pages from a CMS or a blog section of the site. Using `getInitialProps` would opt you into SSR in that case. Next.js currently has a `next export` command, that makes the application fully SSG, losing the hybrid nature of Next.js. If

Unverified for your environment

Select your OS to check compatibility.

Your OS

OS version

Product version

1 Fix

Canonical Fix

Unverified Fix

New Fix – Awaiting Verification

Implement Hybrid Data Fetching Methods in Next.js

Medium Risk

Next.js currently requires a choice between static generation (SSG) and server-side rendering (SSR) for pages, limiting flexibility in data fetching strategies. The introduction of `getStaticProps`, `getServerSideProps`, and `getStaticPaths` allows developers to opt for SSG or SSR on a per-page basis, enhancing the hybrid nature of Next.js applications.

Awaiting Verification

Be the first to verify this fix

1
Add getStaticProps for Static Generation
Implement the `getStaticProps` method in your Next.js pages to enable static generation at build time. This method will fetch data and pre-render the page as static HTML.
typescript
```
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data }, // will be passed to the page component as props
  };
}
```
2
Add getServerSideProps for Server-Side Rendering
Implement the `getServerSideProps` method in your Next.js pages to enable server-side rendering. This method will fetch data on each request, allowing for dynamic content.
typescript
```
export async function getServerSideProps(context) {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data }, // will be passed to the page component as props
  };
}
```

Define Dynamic Routes with getStaticPaths

Use the `getStaticPaths` method to define dynamic routes for static generation. This method returns a list of paths that should be statically generated at build time.

typescript

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

4
Test and Validate Implementations
Run your Next.js application and ensure that the pages using `getStaticProps`, `getServerSideProps`, and `getStaticPaths` are rendering correctly. Check both static and dynamic routes to confirm they are functioning as expected.
bash
```
npm run build && npm start
```

Validation

Confirm that the pages render correctly with the expected data by visiting the URLs in a web browser. Check the network tab to ensure data is fetched appropriately for both static and server-side rendered pages.

Environment

Submitted by

Alex Chen

2450 rep

Static Generation / SSG Improvements

Problem

1 Fix

Implement Hybrid Data Fetching Methods in Next.js

Add getStaticProps for Static Generation

Add getServerSideProps for Server-Side Rendering

Define Dynamic Routes with getStaticPaths

Test and Validate Implementations

Validation

Environment

Submitted by

Tags