Next.js 13中Router.refresh()不生效？求技术解决方案

可能原因 #

1. Router实例冗余传递引发的上下文异常
   组件内部已经通过useRouter()获取了路由实例，却又在todoDelete函数中额外传递router参数，这种冗余操作可能导致隐式的上下文引用问题，进而让refresh()调用失效。

2. 数据获取方式与router.refresh()的作用逻辑不匹配
   router.refresh()的核心功能是触发服务器组件重新拉取数据并渲染。如果你的Todo列表数据是在客户端组件中通过fetch/useSWR等方式获取的，refresh()无法触发客户端数据的更新，自然看不到页面变化。

3. Fetch请求默认缓存的干扰
   Next.js 13中fetch默认会缓存请求结果，即便调用了router.refresh()，客户端可能仍读取缓存的旧数据，导致页面无法同步服务器端的最新状态。

解决步骤 #

1. 移除冗余的Router参数传递 #

组件内部已持有有效的router实例，无需在todoDelete中重复传递，修正代码如下：

'use client';

import { useRouter } from "next/navigation";

export default function Todo({ todo }) {
    const router = useRouter();

    async function todoDelete(id) {
        await fetch(`/api/todo/delete?id=${id}`, {
            method: 'DELETE',
            cache: 'no-store' // 禁用缓存，确保请求实时触达服务器
        });
        router.refresh();
    }

    return (
        <>
            <li key={todo.id}>
                <input type='checkbox' checked={todo.isDone} onChange={(e) => update(todo.id, e.target.checked, router.refresh)}></input>
                {todo.name}
                <button onClick={() => todoDelete(todo.id)}>Delete</button>
            </li>
        </>
    )
}

2. 确保父组件为服务器组件并在服务端获取数据 #

将承载Todo列表的父页面改为服务器组件，并在服务端直接获取数据：

// app/todos/page.js（服务器组件）
async function getTodos() {
  const res = await fetch('http://your-api/todos', { cache: 'no-store' });
  return res.json();
}

export default async function TodosPage() {
  const todos = await getTodos();
  return (
    <ul>
      {todos.map(todo => <Todo key={todo.id} todo={todo} />)}
    </ul>
  );
}

这种情况下，router.refresh()会触发服务器组件重新执行getTodos，拉取最新数据并完成页面渲染更新。

3. 客户端数据场景：手动更新状态 #

如果必须在客户端组件中管理Todo数据，不要依赖router.refresh()，而是通过状态管理手动更新列表：

// 父客户端组件示例
'use client';
import { useState, useEffect } from 'react';
import Todo from './Todo';

export default function TodosPage() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch('/api/todos')
      .then(res => res.json())
      .then(data => setTodos(data));
  }, []);

  const handleDelete = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <ul>
      {todos.map(todo => <Todo key={todo.id} todo={todo} onDelete={handleDelete} />)}
    </ul>
  );
}

然后在Todo组件中调用更新函数：

'use client';

export default function Todo({ todo, onDelete }) {
    async function todoDelete(id) {
        await fetch(`/api/todo/delete?id=${id}`, {
            method: 'DELETE',
            cache: 'no-store'
        });
        onDelete(id); // 手动更新客户端状态
    }

    return (
        <>
            <li key={todo.id}>
                <input type='checkbox' checked={todo.isDone} onChange={(e) => update(todo.id, e.target.checked)}></input>
                {todo.name}
                <button onClick={() => todoDelete(todo.id)}>Delete</button>
            </li>
        </>
    )
}

内容的提问来源于stack exchange，提问作者Typhon