Phân biệt cách sử dụng fetch vs asyncData trong NuxtJS

Khi làm việc với nuxtJS bạn sẽ đụng tới hai khái niệm này là fetch và asyncData. Hai phương thức này giống nhau về cách sử dụng đó là cho phép xử lý dự kiện bất đồng bộ và nhận kết quả trả về và có một tham số đầu vào là context (trong context có lưu trữ các biến store, params, isDev,…). Khác nhau của hai phương thức nào là mục đích sử dụng. Cả fetch và asyncData đều được gọi một lần duy nhất (lần đầu tiên khi request trực tiếp đến server) và được gọi mổi lần ở client khi chuyển tới page tương ứng.

fetch

mục đích là lấy dữ liệu từ api và cập nhập vào lại trong store của ứng dụng, từ đó mới lấy dữ liệu từ store ra dùng, hàm này không trả về dữ liệu.

asyncData

cũng lấy dữ liệu từ api, nhưng không cập nhật vào store, mà hàm này trả về là object, giá trị của object này sẽ được sử dụng trong component luôn không cập nhật trong store và giá trị này sẽ được merge với giá trị ban đầu mà bạn khai báo trong thuộc tính data. asyncData thường được gọi nếu bạn chỉ muốn lấy dữ liệu từ server và hiển thị ra component luôn, không lưu trữ lại trong store.

Xét đoạn mã trên và xem log ở trình duyệt (liên kết user/login)

1. Khi bạn refesh trình duyệt ở trang user/login: thì fetch sẽ được gọi 1 lần asyncData cũng được gọi 1 lần và cả fetch và asyncData chỉ được ở ở phía server, không gọi ở client.
2. Khi bạn di chuyển qua các trang từ trang chủ về trang login: thì fetch và asyncData được gọi mổi lần khi từ trang khác vào trang login và lúc này chỉ gọi ở client không gọi ở phía server.

Việc theo dõi log trên trình duyệt nó có hiện thị cho bạn biết được là log ở server side (Nuxt SSR) hay log ở client

Log ở server

log ở client

Hoặc bạn có thể kiểm tra được gọi từ server hay client bằng việc kiểm tra process.server, thay đổi mã phía dưới và xem lại log của trình duyệt

asyncData({ store }) {
    console.log(`asyncData call from: ${process.server ? 'server' : 'client'}`)
    return {
      name: 'mono'
    }
  },
  fetch(context) {
    console.log(`fetch call from: ${process.server ? 'server' : 'client'}`)
  },

Vì vậy, tùy trường hợp cụ thể mà bạn sử dụng fetch hoặc asyncData

Nguồn: nuxtJS api