刷新页面
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 32 课，共 47 课。
你已经被一个谎言蒙骗了两节课。提交表单后，项目确实保存了，但页面没有变化。重新加载页面，它就出现了。
原因正是让服务器组件运行得很快的关键。页面在服务器上只读取了一次数据，而浏览器中保存的是最终结果。你的操作更改了背后的数据，却没有人通知页面。
修复方法只有一行代码，就在 action 的末尾：
'use server';
import { revalidatePath } from 'next/cache';
import { saveTask } from '../lib/db';
export async function addTask(formData) {
saveTask(formData.get('title'));
revalidatePath('/');
}revalidatePath('/') 会丢弃 Next.js 为该路由缓存的内容，并重新渲染（在服务器上使用最新数据），然后将新结果替换到页面中。无需重新加载，没有加载动画，也不会丢失状态。
参数是要重新渲染的路径，写法要和 URL 中显示的一样：首页用 '/'，任务页用 '/tasks'。如果指向了错误的路径，界面上就不会有任何变化：这就是经典的“我的操作生效了，但列表还是旧的” bug。
有时你根本不想停留在当前页面。对于“保存后跳转到其他位置”，服务器操作可以用 redirect() 结束：
import { redirect } from 'next/navigation';
export async function createPost(formData) {
const id = savePost(formData.get('title'));
redirect(`/posts/${id}`);
}导入方式与页面中使用的一样。用户留在当前页面时使用 revalidatePath，跳转到其他页面时使用 redirect。
挑战
简单addTask 可以正确保存任务，但屏幕上的列表一直没有更新。修复这个问题。
- 在
app/actions.js中，从'next/cache'导入revalidatePath。 - 保存任务后，使用主页路由
'/'调用它。
无需更改 app/page.jsx 中的任何内容：只需添加一条导入语句，再修改一行代码即可修复。
亲手试试
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
