Currently, I am developing a project using Next.js along with Drizzle ORM. The main functionality involves creating and updating tasks. However, after submitting the task form, the page navigates back to the homepage, but the newly created/updated task does not appear until I manually refresh the page. Below is the relevant code snippet:
TaskForm.tsx (Client Component):
const onSubmit = async (values) => {
const response =
type === OperationType.Create
? await addTask(values)
: await updateTask(defaultValues?.id ?? 0, { ...defaultValues, ...values });
toast(response.message);
if (response.success) {
form.reset();
router.refresh(); // Attempting to refresh the page
router.push(redirect ?? "/"); // Redirect to homepage after submission
}
};
app/page.tsx (Server Component):
export const revalidate = 0; // ISR disabled
export default async function Home() {
const tasks = await getTasks();
const completedTasks = tasks.filter(task => task.isCompleted);
const incompleteTasks = tasks.filter(task => !task.isCompleted);
return (
<div className="container">
<h1>Incomplete Tasks</h1>
<TodoListTable data={incompleteTasks} />
<h1>Completed Tasks</h1>
<CompletedListTable data={completedTasks} />
</div>
);
}
actions.ts (Server Actions for Drizzle ORM):
export async function addTask(task) {
try {
db.insert(tasks).values(task).run();
return { success: true, message: "Task created successfully" };
} catch (error) {
return { success: false, message: "Error creating task" };
}
}
Despite successful creation or update of the task, the homepage fails to display the new task unless manually refreshed.
Steps Taken So Far:
- I attempted to use
router.refresh()to reload the page, yet it doesn't seem to reflect the updated data post-task submission. - I turned off ISR by setting
export const revalidate = 0;inapp/page.tsxto ensure fresh data fetch each time. - Tried both
router.replace()androuter.push()without any change in behavior.
What's missing here? How can I guarantee that the homepage consistently shows the latest task list after submission without requiring manual refresh?