VueJS: Bộ nhớ đệm (Caching)

Mặc dù SSR của Vue khá nhanh, nhưng nó không thể phù hợp với hiệu suất của chuỗi dựa trên chuỗi thuần túy do chi phí tạo ra các đối tượng component và các node DOM ảo. Trong trường hợp hiệu suất SSR là rất quan trọng, việc tận dụng các chiến lược bộ nhớ đệm một cách khôn ngoan có thể cải thiện đáng kể thời gian phản hồi và giảm tải máy chủ.

#Caching cấp độ trang

Ứng dụng được hiển thị trên máy chủ trong hầu hết các trường hợp dựa trên dữ liệu bên ngoài, do đó nội dung động theo bản chất và không thể được lưu trong bộ nhớ cache trong thời gian dài. Tuy nhiên, nếu nội dung không dành riêng cho người dùng (nghĩa là với cùng một URL, nội dung đó sẽ hiển thị cùng một nội dung cho tất cả người dùng), chúng ta có thể tận dụng chiến lược được gọi là bộ nhớ đệm để cải thiện đáng kể khả năng xử lý lưu lượng truy cập cao của ứng dụng của chúng ta.

Điều này thường được thực hiện ở lớp Nginx, nhưng chúng ta cũng có thể thực hiện nó trong Node.js:

const microCache = LRU({
  max: 100,
  maxAge: 1000 // các entry sẽ hết hạn trong 1 giây.
})

const isCacheable = req => {
  // thực thi logic để kiểm tra xem yêu cầu có phải loại đặc biệt không.
  // chỉ những trang không phải loại đặc biệt mới được cache
}

server.get('*', (req, res) => {
  const cacheable = isCacheable(req)
  if (cacheable) {
    const hit = microCache.get(req.url)
    if (hit) {
      return res.end(hit)
    }
  }

  renderer.renderToString((err, html) => {
    res.end(html)
    if (cacheable) {
      microCache.set(req.url, html)
    }
  })
})

Vì nội dung được lưu trong bộ nhớ cache chỉ trong một giây nên người dùng sẽ không thấy nội dung lỗi thời. Tuy nhiên, điều này có nghĩa là máy chủ chỉ phải thực hiện tối đa một lần hiển thị đầy đủ mỗi giây cho mỗi trang được lưu trong bộ nhớ cache.

#Caching cấp component

vue-server-renderer có hỗ trợ tích hợp cho bộ nhớ đệm cấp component. Để kích hoạt nó, bạn cần cung cấp một bộ nhớ cache thực hiện khi tạo trình kết xuất đồ họa. Cách sử dụng phổ biến là truyền một lru-cache :

const LRU = require('lru-cache')

const renderer = createRenderer({
  cache: LRU({
    max: 10000,
    maxAge: ...
  })
})

Sau đó, bạn có thể lưu vào bộ nhớ cache một component bằng cách thực thi hàm serverCacheKey:

export default {
  name: 'item', // bắt buộc
  props: ['item'],
  serverCacheKey: props => props.item.id,
  render (h) {
    return h('div', this.item.id)
  }
}

Lưu ý rằng component có thể lưu vào bộ nhớ cache cũng phải xác định một name tùy chọn duy nhất. Với một tên duy nhất, key bộ nhớ đệm là như sau cho mỗi component: bạn không cần phải lo lắng về hai thành phần trả về cùng một key.

Key được trả về từ serverCacheKey phải chứa đủ thông tin để biểu thị khuôn dạng của kết quả hiển thị. Ở trên là một triển khai tốt nếu kết quả hiển thị được xác định duy nhất bởi props.item.id. Tuy nhiên, nếu mục có cùng id có thể thay đổi theo thời gian hoặc nếu kết quả hiển thị cũng dựa trên một giá trị khác, thì bạn cần phải sửa đổi serverCacheKey để đưa các biến khác vào tài khoản.

Trả về một hằng số sẽ làm cho component luôn được lưu trong bộ nhớ cache, điều này tốt cho các component hoàn toàn tĩnh.

#Khi nào nên sử dụng bộ nhớ cache component

Nếu trình kết xuất truy cập bộ nhớ cache cho một component trong khi kết xuất, nó sẽ trực tiếp sử dụng lại kết quả được lưu trong bộ nhớ cache cho toàn bộ cây con. Điều này có nghĩa là bạn KHÔNG nên cache một component khi:

• Nó có các component con có thể dựa vào trạng thái toàn cầu.
• Nó có các component con tạo ra các hiệu ứng phụ trên render context.

Do đó, bộ nhớ đệm component sẽ được áp dụng cẩn trong để giải quyết các tắc nghẽn một cách hiệu quả. Trong hầu hết các trường hợp, bạn không nên và không cần phải cache các component đơn lẻ. Loại component tốt nhất bạn nên áp dụng cache là loại được lặp lại trong danh sách lớn với v-for. Vì các component này thường được điều khiển bởi các đối tượng trong các bộ sưu tập cơ sở dữ liệu, nên ta có thể sử dụng một chiến lược bộ nhớ đệm đơn giản: tạo các khóa bộ nhớ cache bằng id duy nhất của chúng cộng với dấu thời gian cập nhật cuối cùng:

serverCacheKey: props => props.item.id + '::' + props.item.last_updated