Làm mới trang

Suốt hai bài học, bạn vẫn tin vào một điều không đúng. Bạn gửi biểu mẫu và mục đó thực sự được lưu, nhưng màn hình không chuyển sang trang khác. Tải lại trang, mục đó sẽ hiện ra.

Chính điều này giúp Server Components chạy nhanh. Trang đọc dữ liệu một lần trên máy chủ, còn trình duyệt giữ kết quả hoàn chỉnh. Hành động của bạn đã thay đổi dữ liệu phía sau trang. Không ai báo cho trang biết.

Bản sửa chỉ cần một dòng ở cuối hành động:

'use server';

import { revalidatePath } from 'next/cache';
import { saveTask } from '../lib/db';

export async function addTask(formData) {
    saveTask(formData.get('title'));
    revalidatePath('/');
}

revalidatePath('/') xóa dữ liệu Next.js đã lưu vào bộ nhớ đệm cho đường dẫn đó rồi kết xuất lại (trên máy chủ, với dữ liệu mới), sau đó thay kết quả mới vào trang. Không tải lại trang, không có vòng quay tải, không có trạng thái.

Đối số là đường dẫn cần kết xuất lại, được viết giống như cách nó xuất hiện trong URL: '/' cho trang chủ, '/tasks' cho trang công việc. Nếu trỏ đến sai đường dẫn thì sẽ không có gì thay đổi hiển thị: đây là bug kinh điển kiểu "hàm xử lý của mình hoạt động nhưng danh sách vẫn cũ".

Đôi khi bạn không muốn ở yên một chỗ. Với thao tác “lưu lại rồi chuyển đến nơi khác”, Server Action có thể kết thúc bằng redirect():

import { redirect } from 'next/navigation';

export async function createPost(formData) {
    const id = savePost(formData.get('title'));
    redirect(`/posts/${id}`);
}

Cùng câu lệnh import mà bạn sẽ dùng trong một trang. Dùng revalidatePath khi người dùng vẫn ở lại trang, và redirect khi họ chuyển sang trang khác.