Dùng revalidateTag trong Next.js 14: Tối ưu hóa việc revalidate dữ liệu

Next.js 14 mang đến một tính năng mới gọi là revalidateTag, giúp quản lý hiệu quả việc revalidate dữ liệu thông qua các thẻ (tags). Điều này cực kỳ hữu ích khi bạn muốn làm mới (revalidate) dữ liệu liên quan đến một tập hợp cụ thể của trang hoặc API mà không cần làm mới toàn bộ hệ thống.

Tại sao nên dùng revalidateTag?

Trong các ứng dụng web hiện đại, dữ liệu có thể thay đổi liên tục, đặc biệt là từ các API hay database. Khi dữ liệu thay đổi, ta muốn các trang liên quan hoặc các API phản hồi lại sự thay đổi đó một cách nhanh chóng. Tuy nhiên, việc cập nhật toàn bộ hệ thống hoặc nhiều trang cùng lúc không phải lúc nào cũng tối ưu, vì nó có thể dẫn đến quá tải hoặc thời gian tải chậm. Đây chính là lúc revalidateTag phát huy tác dụng.

Với revalidateTag, bạn có thể chỉ định một nhóm các trang hoặc dữ liệu để làm mới, dựa trên tag bạn đặt. Điều này mang lại tính linh hoạt và giúp cải thiện hiệu suất cho ứng dụng của bạn.

Cách hoạt động của revalidateTag

Trong Next.js 14, bạn có thể gán các tags cho các yêu cầu fetch. Khi dữ liệu của một thẻ cụ thể thay đổi, bạn có thể kích hoạt việc làm mới (revalidate) tất cả các trang hoặc API liên quan đến thẻ đó bằng cách sử dụng revalidateTag.

Ví dụ cơ bản:

Giả sử bạn có một ứng dụng blog, và bạn muốn cập nhật dữ liệu của các bài viết sau khi thêm hoặc chỉnh sửa bài viết. Bạn có thể sử dụng revalidateTag để làm điều này.

1. Cấu hình trong fetch:

export async function getPostData() {
  const response = await fetch('https://api.example.com/posts', {
    next: { tags: ['posts'] },
  });
  const data = await response.json();
  return data;
}

Trong ví dụ trên, API call này sẽ được gắn với tag 'posts'. Mỗi lần API này được gọi, nó sẽ lưu trạng thái cache liên quan đến thẻ 'posts'.

1. Cập nhật và revalidate:

Sau khi người dùng thêm một bài viết mới hoặc chỉnh sửa bài viết cũ, bạn có thể kích hoạt việc làm mới cache cho các trang hoặc API liên quan bằng cách gọi revalidateTag.

import { revalidateTag } from 'next/cache';

export default async function updatePost(postId, postData) {
  // Thực hiện update bài viết
  await fetch(`https://api.example.com/posts/${postId}`, {
    method: 'PUT',
    body: JSON.stringify(postData),
  });

  // Làm mới cache cho các trang hoặc API liên quan đến thẻ 'posts'
  revalidateTag('posts');
}

Cập nhật từ trang khác ngoài project

1. Tạo api: app/api/revalidate/route.ts

import type { NextRequest } from "next/server";
import { revalidateTag } from "next/cache";

export async function GET(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get("tag");
  if (!tag) {
    return Response.json({ error: "Missing tag" }, { status: 400 });
  }

  console.log("Revalidating tag", tag);

  revalidateTag(tag);
  return Response.json({
    message: `Tag ${tag} revalidated successfully`,
    revalidated: true,
    now: Date.now(),
  });
}

2. Config next config cors

async headers() {
    return [
      {
        // Routes this applies to
        source: "/api/(.*)",
        // Headers
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "*",
          },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET, POST, PUT, DELETE, OPTIONS",
          },
          {
            key: "Access-Control-Allow-Headers",
            value: "Content-Type, Authorization",
          },
        ],
      },
    ];
  },

3. Gọi từ ngoài trang như admin

axios.get(`https://example.com/api/revalidate?tag=${tag}`);

=> Trong ví dụ này, sau khi bài viết được cập nhật, hệ thống sẽ tự động revalidate tất cả các trang hoặc API sử dụng tag 'posts', giúp đảm bảo rằng dữ liệu mới nhất sẽ được hiển thị.

1. Kết hợp với ISR (Incremental Static Regeneration):

revalidateTag còn có thể kết hợp với ISR để tự động làm mới các trang tĩnh mà không cần phải rebuild lại toàn bộ ứng dụng. Ví dụ, khi bạn revalidate tag 'posts', chỉ những trang liên quan đến bài viết mới hoặc bài viết đã được chỉnh sửa sẽ được tái tạo (rebuild).

Lợi ích của revalidateTag:

• Hiệu suất cao hơn: Chỉ làm mới dữ liệu hoặc trang liên quan thay vì toàn bộ ứng dụng.
• Quản lý dữ liệu hiệu quả: Dễ dàng gán và quản lý các trang, API theo tag.
• Tính năng kết hợp mạnh mẽ: Dễ dàng kết hợp với ISR để tăng hiệu suất ứng dụng.
• Tối ưu hóa chi phí và thời gian: Giảm thiểu việc gọi lại API không cần thiết hoặc làm mới các trang không thay đổi.

Kết luận

revalidateTag trong Next.js 14 là một tính năng mạnh mẽ giúp tối ưu hóa việc revalidate dữ liệu cho các ứng dụng web lớn. Bằng cách sử dụng các thẻ để chỉ định các trang hoặc API liên quan, bạn có thể cải thiện hiệu suất và giảm thiểu chi phí cho hệ thống của mình.

Hãy thử áp dụng revalidateTag vào dự án của bạn để tận dụng tối đa những lợi ích mà nó mang lại!