Speculation Rules API là gì? Công nghệ Pre-render giúp người dùng chuyển trang 0ms

Sẽ thế nào nếu khách hàng nhấp vào một bài viết trên website của bạn và **trang web mới hiển thị TỨC THÌ trong 0 mili-giây (0ms)** giống như đang đọc ứng dụng offline? Đó không phải là phép thuật, mà là công nghệ web tiên tiến mới nhất của Google Chrome: Speculation Rules API.

1. Speculation Rules API hoạt động thế nào?

Trình duyệt sẽ theo dõi hành vi của người dùng: Khi họ di chuột (Hover) hoặc đưa ngón tay lại gần một đường link trong 200ms, Speculation Rules API sẽ bảo trình duyệt: "Người dùng sắp nhấp vào link này đấy, hãy âm thầm Pre-render trang đó ngay lập tức trong bộ nhớ ngầm!" Khi khách thực sự nhấp chuột, trang web đã sẵn sàng 100% để hiển thị ngay lập tức.

2. Khai báo Speculation Rules bằng thẻ Script JSON

Chèn đoạn mã này vào trang Next.js:

<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/blog/*" },
          { "not": { "href_matches": "/admin/*" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

3. So sánh Speculation Rules API với Preload thông thường

• Preload / Prefetch cũ: Chỉ tải trước file HTML/JS thô, trình duyệt vẫn mất thời gian parse và render DOM.
• Speculation Rules Pre-render: Tải và **thực thi render hoàn chỉnh toàn bộ trang web ngầm trong RAM**, khi nhấp vào chỉ việc lật trang lập tức.

Kết luận

Speculation Rules API là bước nhảy vọt về trải nghiệm tốc độ cho người dùng web modern. Uwmee Software tích hợp công nghệ Speculation Rules mang lại trải nghiệm chuyển trang 0ms siêu tốc cho website Next.js. Đọc thêm bài viết Service Worker và Offline PWA.