[Next.js Tutorial] Caching: Bí quyết để website của bạn nhanh hơn 10x

Trong thế giới phát triển web hiện đại, tốc độ không còn là một lựa chọn mà là yêu cầu bắt buộc. Người dùng mong đợi các trang web tải nhanh như chớp, và các công cụ tìm kiếm cũng ưu ái những website có hiệu suất cao. Next.js, với tư cách là một trong những framework React hàng đầu, cung cấp một hệ thống caching cực kỳ mạnh mẽ và tinh vi để giải quyết bài toán này.

Nhưng chính xác thì caching trong Next.js hoạt động như thế nào? Nó có những loại nào và khi nào chúng ta nên sử dụng chúng? Bài viết này sẽ giúp bạn giải mã mọi tầng lớp caching trong Next.js, từ đó làm chủ công cụ "quyền năng" này để xây dựng những ứng dụng web nhanh hơn, hiệu quả hơn và tiết kiệm chi phí hơn.

Tại sao Caching lại quan trọng đến vậy? 🤔

Trước khi đi sâu vào kỹ thuật, hãy cùng xem xét lý do tại sao caching lại là một khái niệm cốt lõi trong Next.js và phát triển web nói chung.

• ⚡ Tăng tốc độ tải trang: Thay vì phải tính toán lại hoặc yêu cầu dữ liệu từ máy chủ cho mỗi lượt truy cập, caching cho phép lưu trữ kết quả của các công việc đó. Khi có yêu cầu mới, hệ thống chỉ cần trả về bản sao đã được lưu sẵn, giúp giảm độ trễ (latency) một cách đáng kể.
• 📉 Giảm tải cho server và database: Bằng cách phục vụ nội dung từ cache, bạn giảm số lượng yêu cầu phải xử lý bởi server, API hay database. Điều này không chỉ giúp ứng dụng của bạn chịu tải tốt hơn mà còn tiết kiệm chi phí tài nguyên.
• ✨ Cải thiện trải nghiệm người dùng (UX): Một trang web nhanh mang lại trải nghiệm mượt mà, giữ chân người dùng và tăng tỷ lệ chuyển đổi.
• 🔎 SEO tốt hơn: Tốc độ trang là một yếu tố xếp hạng quan trọng của Google. Website nhanh hơn có cơ hội đạt thứ hạng cao hơn trên kết quả tìm kiếm.

Next.js đã tích hợp caching vào tận lõi kiến trúc của mình, đặc biệt là với sự ra đời của App Router, biến nó thành một cơ chế tự động và thông minh.

Các lớp Caching chính trong Next.js

Với App Router, Next.js giới thiệu một mô hình caching nhiều lớp, hoạt động phối hợp với nhau để tối ưu hóa hiệu suất ở mọi cấp độ. Hãy tưởng tượng nó như một dây chuyền sản xuất hiệu quả, nơi mỗi công đoạn đều có kho chứa riêng để tăng tốc toàn bộ quy trình.

1. Request Memoization (Lưu trữ tạm thời yêu cầu)

Đây là lớp caching tồn tại trong thời gian ngắn nhất, chỉ trong vòng đời của một yêu cầu (request) duy nhất trên máy chủ.

• Cách hoạt động: Khi bạn sử dụng hàm fetch trong nhiều Server Component khác nhau trong cùng một cây component (component tree) với cùng một URL và các tùy chọn, Next.js sẽ tự động chỉ thực hiện yêu cầu fetch đó một lần duy nhất. Các lệnh gọi tiếp theo sẽ sử dụng lại kết quả đã được lưu trong bộ nhớ.
• Lợi ích: Tránh việc gọi đi gọi lại cùng một API để lấy dữ liệu cho các component khác nhau trong một lần render trang, giúp giảm số lượng yêu cầu mạng không cần thiết.
• Lưu ý: Cơ chế này chỉ áp dụng cho fetch và không áp dụng cho các thư viện fetching dữ liệu khác như Axios. React cũng cung cấp hàm cache để bạn có thể áp dụng cơ chế tương tự cho các hàm của riêng mình.

2. Data Cache (Bộ đệm dữ liệu)

Đây là một lớp caching bền bỉ hơn, tồn tại giữa các yêu cầu của người dùng và thậm chí cả các lần triển khai (deploy). Data Cache chịu trách nhiệm lưu trữ kết quả trả về từ các nguồn dữ liệu bên ngoài (ví dụ: API, CMS, database).

• Cách hoạt động: Khi bạn gọi fetch trong một Server Component, kết quả của nó sẽ được tự động lưu vào Data Cache trên máy chủ Next.js.

  // app/page.js
  async function getPosts() {
    const res = await fetch('https://api.example.com/posts') // Kết quả được cache tự động
    return res.json()
  }
  

• Kiểm soát caching: Bạn có thể tùy chỉnh hành vi caching của fetch thông qua tùy chọn next.revalidate hoặc cache.
  • Cache mặc định (force-cache): fetch('...') - Dữ liệu được cache vô hạn (hoặc cho đến khi bạn triển khai lại).
  • Không cache (no-store): fetch('...', { cache: 'no-store' }) - Dữ liệu luôn được tìm nạp mới mỗi khi có yêu cầu. Tương tự getServerSideProps ở Pages Router.
  • Revalidation theo thời gian (ISR): fetch('...', { next: { revalidate: 60 } }) - Dữ liệu được cache và sẽ được làm mới sau mỗi 60 giây.

3. Full Route Cache (Bộ đệm toàn bộ Route)

Đây là lớp caching mạnh mẽ nhất và mang lại hiệu suất cao nhất. Next.js sẽ tự động render các Server Component và lưu lại toàn bộ kết quả HTML và React Server Component Payload (RSC Payload) vào bộ đệm.

• Cách hoạt động: Tại thời điểm build (build time), hoặc trong quá trình revalidation, Next.js sẽ render trước các route (trang) của bạn. Kết quả cuối cùng (HTML + RSC Payload) được lưu trữ trên máy chủ hoặc tại các điểm biên (Edge) của Vercel.
• Lợi ích: Khi người dùng truy cập vào một route đã được cache, máy chủ không cần phải render lại bất cứ thứ gì. Nó chỉ cần gửi về file HTML/RSC đã được tạo sẵn. Đây chính là bản chất của Static Site Generation (SSG) nhưng linh hoạt hơn rất nhiều.
• Tự động: Miễn là bạn sử dụng fetch với caching (hành vi mặc định), các route của bạn sẽ tự động được đưa vào Full Route Cache. Nếu bạn sử dụng các hàm động (dynamic functions) như headers() hoặc cookies(), hoặc fetch với cache: 'no-store', route đó sẽ trở thành động (dynamic) và không được cache ở lớp này.

4. Router Cache (Bộ đệm phía Client)

Lớp cache này hoạt động hoàn toàn trên trình duyệt của người dùng.

• Cách hoạt động: Router Cache lưu trữ RSC Payload của các route mà người dùng đã truy cập. Khi người dùng điều hướng qua lại giữa các trang bằng <Link>, Next.js sẽ không cần phải gửi yêu cầu mới đến máy chủ nếu payload của trang đó đã có trong cache. Nó chỉ cần lấy từ bộ nhớ của trình duyệt và render lại ngay lập tức.
• Lợi ích: Tạo ra trải nghiệm điều hướng gần như tức thì, siêu mượt mà.
• Làm mới (Invalidation): Router Cache sẽ được làm mới sau một khoảng thời gian nhất định (vài phút đối với các route động, lâu hơn cho route tĩnh) hoặc khi người dùng refresh lại trang.

Chiến lược Caching và Revalidation

Hiểu các lớp caching là một chuyện, nhưng việc áp dụng chúng một cách hiệu quả lại là chuyện khác. Next.js cung cấp hai chiến lược chính để đảm bảo dữ liệu của bạn luôn được cập nhật.

1. Time-based Revalidation (Làm mới theo thời gian - ISR)

Đây là chiến lược "cũ mà tốt". Bạn chỉ định một khoảng thời gian (tính bằng giây), sau đó dữ liệu sẽ được coi là "cũ" và cần được làm mới.

• Cách thực hiện: Sử dụng tùy chọn revalidate trong fetch hoặc trong cấu hình của Route Segment.

  // Trong fetch
  fetch('https://...', { next: { revalidate: 3600 } }) // Làm mới sau mỗi giờ
  
  // Trong file page.js hoặc layout.js
  export const revalidate = 60 // Làm mới toàn bộ route sau mỗi 60 giây
  

• Khi nào nên dùng: Phù hợp với dữ liệu không yêu cầu cập nhật theo thời gian thực nhưng vẫn cần được làm mới định kỳ, ví dụ như một trang blog, danh sách sản phẩm, tin tức.

2. On-demand Revalidation (Làm mới theo yêu cầu)

Đây là cách tiếp cận hiện đại và hiệu quả hơn, cho phép bạn làm mới cache một cách có chủ đích khi dữ liệu thay đổi.

• Cách thực hiện: Bạn có thể kích hoạt revalidation thông qua các "tag" hoặc "path".

  • Revalidate theo Tag: Gắn một hoặc nhiều tag vào lệnh fetch. Sau đó, bạn có thể gọi một hàm revalidateTag('tag-name') (thường là trong một API route hoặc Server Action) để làm mới tất cả dữ liệu có gắn tag đó.

    // Lấy dữ liệu và gắn tag
    fetch('https://.../products', { next: { tags: ['products'] } })
    
    // API Route để làm mới (ví dụ: api/revalidate)
    import { revalidateTag } from 'next/cache'
    // ...
    revalidateTag('products')
    

  • Revalidate theo Path: Tương tự, bạn có thể làm mới một đường dẫn cụ thể bằng revalidatePath('/blog/post-1').

• Khi nào nên dùng: Cực kỳ hữu ích khi bạn muốn dữ liệu được cập nhật ngay lập-tức sau một hành động nào đó, ví dụ: người dùng tạo một bài viết mới, cập nhật thông tin sản phẩm, hoặc một webhook từ CMS được kích hoạt.

So sánh Caching: App Router vs. Pages Router

Nếu bạn đã quen thuộc với Pages Router, mô hình caching trong App Router có thể mang lại một vài thay đổi đáng chú ý.

Kết luận: Làm chủ Caching, làm chủ Performance

Hệ thống caching của Next.js, đặc biệt với App Router, là một kiệt tác kỹ thuật được thiết kế để mang lại hiệu suất tối đa với nỗ lực tối thiểu từ nhà phát triển. Bằng cách hiểu rõ từng lớp caching - từ Request Memoization tạm thời, Data Cache bền bỉ, Full Route Cache mạnh mẽ cho đến Router Cache phía client - bạn có thể xây dựng những ứng dụng không chỉ nhanh mà còn có khả năng mở rộng và tiết kiệm chi phí.

Hãy bắt đầu bằng cách để Next.js tự động cache mọi thứ có thể. Sau đó, hãy tinh chỉnh chiến lược của bạn bằng Time-based và On-demand Revalidation để cân bằng giữa hiệu suất và sự tươi mới của dữ liệu. Việc làm chủ những công cụ này sẽ đưa kỹ năng phát triển Next.js của bạn lên một tầm cao mới. Chúc bạn thành công!