Data Fetching in Nuxt

Nuxt offers three different methods to fetch data:

1. $fetch()
2. useFetch()
3. useAsyncData()

The following experiments detail each one of these methods (you may need to use the DevTools to understand it better).

$fetch()

Fetches data both on server and client side (check server console):

useFetch()

Fetches data both only on server (unless client-side navigation happens):

The data can be lazy-loaded not to block the page rendering.

useAsyncData()

Allows loading data asynchronously and passing it from the server to the client:

Server-sent Events

Streaming data from the server using EventSource in the API routes: