FG
🌐 Web & Full-StackVercel

[Bug] next/link is not calling the server for subsequent navigations on dynamic routes

Freshabout 19 hours ago
Mar 14, 20260 views
Confidence Score95%
95%

Problem

Describe the feature you'd like to request In the documentation it is said that the conditions for hard navigation are : - when navigating between dynamic segments - When navigating between two different group layouts (ex: from `(groupA)/layout` to `(groupB)/layout` ) I'd like to suggest also adding hard navigation for segments marked with `dynamic='force-dynamic'` or when using dynamic functions and even when using fetch with `cache: 'no-store'`. In the docs you said that using these configurations is like using `getServerSideProps()` in the pages directory, but it does not behave the same between navigations which is quite confusing. Use cases for this feature could be these : - this app that only store pokemon data in cookies (Live here and source here) - this simple case for an app that generate a random number each time : ckblitz.com/edit/nextjs-sxijav?file=package.json,app%2Fnested%2Fpage.tsx Describe the solution you'd like The solution i propose is to consider hard navigation for these cases : - When navigating to a page marked with `dynamic='force-dynamic'`, next should always do a hard navigation - When navigating to a page using dynamic functions `headers()` and `cookies()`, next should always do a hard navigation - When navigating to a page using `fetch` with `cache: 'no-store'`, next should always do a hard navigation, or at least next should always refetch the data - When navigating to a page using either `fetch` with `next: { revalidate: n_seconds

Unverified for your environment

Select your OS to check compatibility.

1 Fix

Canonical Fix
Unverified Fix
New Fix – Awaiting Verification

Implement Hard Navigation for Dynamic Routes with Force-Dynamic and Fetch Cache Control

Medium Risk

The current implementation of next/link does not trigger a hard navigation for dynamic routes when using certain configurations like dynamic='force-dynamic', dynamic functions (headers, cookies), or fetch with cache: 'no-store'. This leads to inconsistent behavior compared to traditional server-side rendering methods like getServerSideProps, causing confusion for developers.

Awaiting Verification

Be the first to verify this fix

  1. 1

    Update Navigation Logic for Dynamic Routes

    Modify the internal navigation logic of next/link to check for the dynamic='force-dynamic' attribute and trigger a hard navigation whenever this attribute is present.

    javascript
    function handleNavigation(url) {
  const isForceDynamic = checkDynamicAttribute(url);
  if (isForceDynamic) {
    window.location.href = url; // Trigger hard navigation
  } else {
    // Existing soft navigation logic
  }
}
  2. 2

    Enhance Dynamic Function Handling

    Ensure that when navigating to a page using dynamic functions like headers() and cookies(), the navigation logic triggers a hard navigation to refetch the data from the server.

    javascript
    function handleDynamicFunctionNavigation(url) {
  const usesDynamicFunctions = checkDynamicFunctions(url);
  if (usesDynamicFunctions) {
    window.location.href = url; // Trigger hard navigation
  } else {
    // Existing soft navigation logic
  }
}
  3. 3

    Implement Fetch Cache Control for Navigation

    Modify the fetch logic to check for cache: 'no-store' in the request options. If this option is detected, trigger a hard navigation to ensure fresh data is fetched from the server.

    javascript
    function fetchWithCacheControl(url, options) {
  if (options.cache === 'no-store') {
    window.location.href = url; // Trigger hard navigation
  } else {
    // Existing fetch logic
  }
}
  4. 4

    Test Navigation Scenarios

    Create unit tests to verify that the navigation logic correctly identifies when to trigger hard navigation based on the new conditions. Include tests for dynamic='force-dynamic', dynamic functions, and fetch with cache: 'no-store'.

    javascript
    describe('Navigation Logic', () => {
  it('should trigger hard navigation for force-dynamic', () => {
    expect(handleNavigation('/dynamic-route?dynamic=force-dynamic')).toEqual(true);
  });
  // Additional tests...
});

Validation

To confirm the fix worked, navigate to dynamic routes with the specified configurations and ensure that a hard navigation occurs, resulting in fresh data being fetched from the server. Additionally, run the unit tests to verify all scenarios pass successfully.

Sign in to verify this fix

Environment

Submitted by

AC

Alex Chen

2450 rep

Tags

nextjsreactssrlinear:-next