router.refresh() not working properly in Next.js 15

[MwSpaceLLC]

Link to the code that reproduces this issue

https://github.com/mwspace-it/nextjs-15-router-refresh-issue-25-03-2025

To Reproduce

Here's a minimal reproduction case:

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { fetchData } from './actions'; // Server action

export default function ExampleComponent() {
  const router = useRouter();
  const [data, setData] = useState(null);
  
  useEffect(() => {
    async function getData() {
      const result = await fetchData();
      setData(result);
    }
    getData();
  }, []);
  
  const handleRefresh = () => {
    // This should trigger a re-render and refresh data, but doesn't in Next.js 15
    router.refresh();
    console.log("Refresh triggered");
  };
  
  return (
    <div>
      <h1>Data from server: {data ? JSON.stringify(data) : 'Loading...'}</h1>
      <button onClick={handleRefresh}>Refresh Data</button>
    </div>
  );
}

Current vs. Expected behavior

Expected Behavior
When clicking the "Refresh Data" button, the component should refresh, and the timestamp in the displayed data should update to reflect a new API call.

Actual Behavior
When clicking the "Refresh Data" button:

No visual changes occur on the page
The component is not re-rendered
The timestamp in the displayed data remains unchanged

Provide environment information

"yarn" non � riconosciuto come comando interno o esterno,
  Available CPU cores: 32
Binaries:
  Node: 20.12.2
  npm: 10.9.2
  Yarn: N/A
  pnpm: 9.6.0
Relevant Packages:
  next: 15.2.4 // Latest available version is detected (15.2.4).
  eslint-config-next: 15.2.4
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

This functionality worked as expected in Next.js 14 without any issues. The exact same code that worked in v14 is now failing in v15.
I've tried:

Using different approaches to trigger the refresh
Testing in both development and production builds
Checking for console errors (none appear)

Any help or guidance would be greatly appreciated as this is blocking our application's functionality.

[MwSpaceLLC]

Also: router.push('/same-dir?param${random params}')

[mhmadamrii]

useEffect(() => {
    async function getData() {
      const result = await fetchData();
      setData(result);
    }
    getData();
  }, []);

this is a getter function where todos are fetched right? it only invoked once on first render, and what you mean by 'The component is not re-rendered' after making some changes because react doesn't know when should make a comparison between current data and newer data, so you have to make a render helper.

something like:

const [forceRender, setForceRender] = useState(0)

const handleAddTodo = async () => {
    if (!newTodo.trim()) return;

    setLoading(true);

    try {
      // Add the new todo via server action
      await addTodo(newTodo);
      setNewTodo("");

      // This should refresh the component and trigger a refetch of data
      // But in Next.js 15, it doesn't work properly
      console.log("Calling router.refresh() at:", new Date().toISOString());
      router.refresh();
      setLastRefresh(new Date().toISOString());

      // force manual rerender
      setForceRender((prev) => prev + 1);
    } catch (error) {
      console.error("Error adding todo:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    async function getData() {
      const result = await fetchData();
      setData(result);
    }
    getData();
    // add dependency forceRender
  }, [forceRender]);

my suggestions:

• you can just nuke that router.refresh() because your problem just regarding to how you let react know when to re-render
• router.refresh() will be useful if you fetch the data using server component and you want to get fresh data after mutation, since it's behavior to make a new refresh to node.js environment server

*any pro tips and another answers will be appreciated

[MwSpaceLLC]

@mhmadamrii

Thank you for your reply, but this is not the topic at hand.

The sample project correctly explains the issue.

Maybe we’ll update the project, also adding a server component that passes data to the client component, and not any update.

The problem is clear — we’ve developed many projects with Next.js 14, and the same code doesn’t work on version 15.

This issue is surely known to other developers as well, and unfortunately, your comment only adds confusion.

Our project is just an example to help the Vercel team understand where the problem lies, which is most likely in the way caching is handled in the new Next.js 15.

So, let’s try to stay focused on the relevant topics.

[Lacsw]

@MwSpaceLLC Hi!

This problem occurs because router.refresh() making a new request to the server and re-fetching data requests. In your project no any fetch() to make real server action, you trying to get data from a local object.

Try to setting up a real database, fortunately with @vercel/postgres it will be easy. And than reproduce your problem again. I hope this will help you.

[MwSpaceLLC]

@Lacsw However, the issue is real, and what I described is merely an example. We're using this both in a server component that passes data to the client, and within server actions that perform actual queries on MongoDB.

In both cases, the data and components aren't updating as expected.

Furthermore, this problem didn't exist in Next.js version 14.

The exact same code, when moved to Next.js 15, no longer works.

I'd prefer if we didn't lose sight of the core issue.