In Next.js, the static-generation method depends on your router: use getStaticProps and, for data-driven routes, getStaticPaths in the Pages Router; use async Server Components and generateStaticParams in the App Router. Then choose how the generated content stays fresh: build-only output, timed revalidation, on-demand invalidation, or request-time fetching. Check the documentation for your installed Next.js version, because caching defaults and behavior can change.
Choose the workflow for your router
First identify whether the page lives under pages/ or app/. The two routers have different APIs for static generation; do not combine their examples as if they were interchangeable.
As an Amazon Associate I earn from qualifying purchases.
| Router | Fetch page content | Choose dynamic routes |
|---|---|---|
Pages Router (pages/) |
getStaticProps |
getStaticPaths |
App Router (app/) |
Async Server Component, commonly with fetch |
generateStaticParams |
Static generation is a good fit when content can be prepared ahead of a request. If each request must retrieve current data, use request-time rendering instead; if static output should be refreshed later, add a revalidation strategy. The Pages Router data-fetching overview explains these rendering choices.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Pages Router: fetch data with getStaticProps
For a page in pages/ whose rendered content depends on an API or CMS, export getStaticProps. Next.js runs it at build time and supplies its returned data to the page as props. Keep server-only credentials and API access in this function rather than sending secrets to the browser.
#1 Best Overall
export async function getStaticProps() {
const response = await fetch('https://cms.example.com/api/posts')
const posts = await response.json()
return {
props: { posts },
}
}
export default function Blog({ posts }) {
return (
<main>
{posts.map((post) => (
<article key={post.slug}>
<h2>{post.title}</h2>
</article>
))}
</main>
)
}The example assumes the endpoint returns the array in the shape the page renders. In a real project, check the response status and validate or transform the CMS payload before returning it. See the official getStaticProps documentation for the function’s supported behavior.
Pages Router: prerender CMS-driven routes
If each post has a path such as /blog/my-post, put the page in a dynamic route file such as pages/blog/[slug].js. Export getStaticPaths to identify paths to prerender, then use getStaticProps to fetch the record for the path’s slug.
export async function getStaticPaths() {
const response = await fetch('https://cms.example.com/api/posts')
const posts = await response.json()
return {
paths: posts.map((post) => ({
params: { slug: post.slug },
})),
fallback: false,
}
}
export async function getStaticProps({ params }) {
const response = await fetch(
`https://cms.example.com/api/posts/${params.slug}`
)
const post = await response.json()
return { props: { post } }
}The fallback choice determines what happens for paths not listed in paths; select it deliberately based on whether unlisted records should be unavailable or handled through the router’s fallback behavior. For a large content collection, prerendering every record can increase build work. The getStaticPaths documentation describes path selection and fallback modes.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #2
App Router: fetch in an async Server Component
In the App Router, an async Server Component can await data and render it directly; there is no getStaticProps export. This pattern works with a CMS API using fetch, and the fetching guide also describes asynchronous I/O through an ORM or database client.
export default async function BlogPage() {
const response = await fetch('https://cms.example.com/api/posts')
const posts = await response.json()
return (
<main>
{posts.map((post) => (
<article key={post.slug}>
<h2>{post.title}</h2>
</article>
))}
</main>
)
}Identical fetch requests in a React component tree are memoized, but that is distinct from persistent caching. An uncached request can hold up the component that needs it; use a loading.js file or a React <Suspense> boundary when streaming surrounding UI while data resolves would improve the experience. Refer to the App Router data-fetching guide for current details.
App Router: generate dynamic routes from API data
For a route such as app/blog/[slug]/page.tsx, export generateStaticParams. Return an array of objects whose keys match the dynamic segment names. For [slug], each object needs a slug value.
export async function generateStaticParams() {
const response = await fetch('https://cms.example.com/api/posts')
const posts = await response.json()
return posts.map((post) => ({
slug: post.slug,
}))
}
export default async function BlogPost({ params }) {
const { slug } = await params
const response = await fetch(
`https://cms.example.com/api/posts/${slug}`
)
const post = await response.json()
return <article><h1>{post.title}</h1></article>
}generateStaticParams is the App Router counterpart to getStaticPaths. It runs during the build and is not called again during ISR, so it is not a mechanism for periodically discovering newly added slugs. Check the current generateStaticParams reference for route-generation behavior and requirements.
Recommended Free Tools
Decide what happens to omitted paths
If the returned array covers only some records, determine how requests for other dynamic parameter values should behave. The segment option dynamicParams controls the handling of values not returned from generateStaticParams. In the documented Cache Components mode, the array cannot be empty: at least one parameter is required at build time. These details are version- and mode-sensitive, so verify them in the reference for the project you are running.
Choose a freshness policy, not just a rendering function
Static output can become stale when CMS content changes. Decide whether content is fixed until the next deployment, refreshed after a time interval, invalidated when an editor publishes, or fetched for every request. The right choice depends on how quickly updates must appear and the cost of rebuilding or fetching.
| Need | Approach | What to expect |
|---|---|---|
| Content changes only on deployment | Build-time static generation without revalidation | New data appears with a later build and deployment. |
| Periodic updates are acceptable | Timed revalidation / ISR | Generated output can be refreshed after its configured cache lifetime. |
| Refresh after a CMS event | On-demand invalidation | Invalidate the relevant path or tagged data; regeneration may occur on a subsequent request. |
| Each request needs current data | Request-time rendering or uncached retrieval | Data is fetched as the request is handled rather than relying on a static page alone. |
App Router fetch caching: make the behavior explicit
Next.js extends server-side fetch with framework-specific caching controls. The documented options include:
cache: 'no-store'when a request should not use the persistent cache.cache: 'force-cache'to look for a matching response in the cache.next: { revalidate: seconds }to set a cache lifetime in seconds.
For example, a request configured with a 300-second revalidation period expresses a five-minute cache lifetime; it does not guarantee that content changes will appear at precisely five-minute intervals. Defaults can vary with Next.js version and rendering mode, so specify the behavior you need and check the fetch API reference rather than relying on a remembered default.
Free tools Windows power users keep installed
One-click scans. No signup required.
A database or ORM call does not automatically gain the same fetch options. Use the caching and revalidation mechanism appropriate to that data source; the App Router ISR guide documents unstable_cache for ORM or database work.
Refresh generated pages with ISR or on-demand invalidation
With Incremental Static Regeneration, Next.js can regenerate static output after a configured interval. For example, the official App Router guide demonstrates a revalidate value of 60 seconds. That is an example configuration, not a universal recommendation or a promise that every visitor will see an update at exactly that interval.
The same guide describes an hourly interval where a visitor after the cache expires can receive the stale cached page while Next.js creates a fresh version in the background. Choose an interval based on the content’s freshness requirements and traffic pattern. See the ISR guide for the documented behavior and examples.
Invalidate after a CMS update
For event-driven updates, a CMS webhook can call application code that uses revalidatePath for a route or revalidateTag for tagged data. The documented App Router behavior is that invalidation leads to regeneration on the next request; do not treat invalidation alone as an immediate rebuild or immediate page refresh. Apply authentication to webhook endpoints and validate the event before triggering invalidation.
Plan for content volume and missing records
Static generation trades request-time work for build-time work and cached output. Before prerendering a CMS collection, decide which records to include and how omitted records should behave. A practical approach is to statically generate the routes that matter most, while selecting fallback or dynamic-parameter behavior for the remainder only where the router and rendering mode support it.
- For Pages Router, return an intentional set of paths from
getStaticPathsand choose the matching fallback behavior. - For App Router, return the intended parameters from
generateStaticParamsand configuredynamicParamsif the default handling is not right for the site. - Account for the fact that App Router
generateStaticParamsis not rerun during ISR: route discovery and page-data refresh are separate concerns.
Use the documentation for the installed version
Before copying a snippet, check the Next.js version in the project and consult the matching documentation. The official pages cited here were accessed on October 4, 2026; their reported update dates include August 25, 2026 for fetch, February 27, 2026 for generateStaticParams and Pages Router data fetching, and March 25, 2026 for App Router fetching. Since API details and defaults evolve, the installed version’s documentation is the authority for a live implementation.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
