next-cache-components

Tổng quan

next-cache-components là gì?

next-cache-components là một kỹ năng dành cho Next.js 16+ cho phép áp dụng các chiến lược lưu cache nâng cao cho các thành phần React. Bằng cách kích hoạt Cache Components, các nhà phát triển có thể kết hợp nội dung tĩnh, đã lưu cache và động trong cùng một route, cải thiện hiệu suất và tính linh hoạt cho ứng dụng frontend. Kỹ năng này rất phù hợp với các nhóm phát triển ứng dụng web có khả năng mở rộng trên Next.js, những người muốn kiểm soát chi tiết việc render và độ mới của dữ liệu.

Ai nên sử dụng next-cache-components?

Kỹ năng này dành cho các nhà phát triển frontend sử dụng Next.js 16 trở lên. Nó đặc biệt hữu ích cho những ai triển khai trên Vercel hoặc các nền tảng tương tự, cũng như các dự án cần tối ưu tốc độ render và kiểm soát thời gian lưu cache. Nếu ứng dụng của bạn cần cân bằng giữa nội dung tĩnh, dữ liệu lưu cache và cập nhật thời gian thực, next-cache-components là giải pháp thực tiễn.

Các vấn đề được giải quyết bởi next-cache-components

• Cho phép Prerender một phần (Partial Prerendering - PPR) cho các route có nội dung hỗn hợp
• Hỗ trợ lưu cache dữ liệu bất đồng bộ với thời gian và tag tùy chỉnh
• Đơn giản hóa việc quản lý các thành phần tĩnh, đã lưu cache và động
• Cải thiện hiệu suất frontend và trải nghiệm người dùng

Cách sử dụng

Các bước cài đặt

• Cài đặt kỹ năng bằng lệnh:
  npx skills add https://github.com/vercel-labs/next-skills --skill next-cache-components
• Xem file SKILL.md để có tóm tắt ngắn gọn và ví dụ thực tế.
• Khám phá thêm các file như README.md, AGENTS.md và metadata.json để hiểu sâu hơn.

Kích hoạt Cache Components

• Trong file next.config.ts, cấu hình:

  import type { NextConfig } from 'next'
  
  const nextConfig: NextConfig = {
    cacheComponents: true,
  }
  
  export default nextConfig
  

• Cấu hình này thay thế cờ experimental.ppr trước đây và kích hoạt Cache Components cho dự án của bạn.

Các loại nội dung được hỗ trợ

Tĩnh (Tự động Prerender)

• Sử dụng mã đồng bộ và các phép tính thuần túy cho nội dung được render tại thời điểm build.
• Ví dụ:

  export default function Page() {
    return (
      <header>
        <h1>Our Blog</h1>
        <nav>...</nav>
      </header>
    )
  }
  

Đã lưu cache (chỉ thị use cache)

• Dành cho dữ liệu bất đồng bộ không cần lấy lại mỗi lần yêu cầu, sử dụng chỉ thị use cache và thiết lập thời gian lưu cache với cacheLife.
• Ví dụ:

  async function BlogPosts() {
    'use cache'
    cacheLife('hours')
  
    const posts = await db.posts.findMany()
    return <PostList posts={posts} />
  }
  

Động (Suspense)

• Dành cho dữ liệu cần luôn mới, bao bọc các thành phần trong React Suspense.
• Ví dụ:

  import { Suspense } from 'react'
  
  export default function Page() {
    return (
      <>
        <BlogPosts />  {/* Đã lưu cache */}
        <Suspense fallback={<p>Loading...</p>}>
          <UserPreferences />  {/* Động */}
        </Suspense>
      </>
    )
  }
  

Điều chỉnh cho dự án của bạn

• Sử dụng kỹ năng này làm tham khảo và điều chỉnh quy trình phù hợp với kho mã và công cụ của bạn. Tránh sao chép nguyên văn; thay vào đó, tích hợp các chiến lược lưu cache phù hợp với nhu cầu ứng dụng.

Câu hỏi thường gặp

Tôi có thể tìm ví dụ thực tế ở đâu?

Xem file SKILL.md để có các mẫu mã rõ ràng và giải thích chi tiết. Tab Files cung cấp truy cập vào toàn bộ cây thư mục, bao gồm các tham chiếu và script hỗ trợ.

next-cache-components có tương thích với các phiên bản Next.js cũ hơn không?

Không, kỹ năng này chỉ dành cho Next.js 16 trở lên. Với các phiên bản cũ hơn, bạn nên xem xét các chiến lược lưu cache khác.

Làm thế nào để kiểm soát thời gian và tag của cache?

Sử dụng các chỉ thị cacheLife và cacheTag trong các hàm thành phần để thiết lập thời gian lưu cache và tag tùy chỉnh. Tham khảo ví dụ trong SKILL.md để biết cú pháp.

Khi nào nên dùng Suspense cho nội dung động?

Dùng Suspense khi bạn cần dữ liệu thời gian chạy luôn mới cho mỗi yêu cầu, như sở thích người dùng hoặc thông tin phiên làm việc.

next-cache-components có phù hợp với dự án của tôi không?

Nếu ứng dụng của bạn cần kết hợp nội dung tĩnh, đã lưu cache và động trong cùng một route và bạn đang dùng Next.js 16+, kỹ năng này rất phù hợp. Với các trang tĩnh thuần túy hoặc ứng dụng không cần dữ liệu bất đồng bộ, các chiến lược render đơn giản hơn có thể đủ dùng.