In this episode, we dive into the differences between server-side and client-side data fetching in Nuxt. We start by showing how useFetch
and useAsyncData
make their requests on the server side by default, which is great for SEO and fast initial page loads. You'll notice that when you refresh the page, there's no XHR (AJAX) request in the browser’s network tab because the data comes straight from the server.
But what if you actually want to make a traditional AJAX request in the browser, like you would in a classic client-side app? We walk through how to set the server
option to false
when using useFetch
, which tells Nuxt to fetch data on the client side instead. Now, you’ll see the XHR request in your network tab, and this can be handy for things like navigation counts or data that doesn’t need to be indexed by search engines.
We also cover some gotchas—like what happens when you try to access data that isn’t there yet, and how to use conditional rendering (v-if
) to handle these loading states. Plus, we show why using await
may not make sense for client-side fetches in some places.
By the end of this video, you’ll know how and when to choose between server- and client-side data fetching in Nuxt, and how to tweak your components to handle both approaches smoothly.