Learn How to Fetch Asynchronous Data in NuxtJS Application
Nuxt.js adds an asyncData method to let you handle async operations before initializing the component
It can be difficult and cumbersome to set up a custom system to fetch asynchronous data before you serve your application to your users and render everything on the server-side. Since JavaScript was designed to mainly run client-side, it comes with a few unwanted traits.
Nuxt.js has made it breathtakingly easy to fetch asynchronous data and render our entire application on the server-side before we serve it to our users.
You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method to let you handle async operations before initializing the component
Sometimes you just want to fetch data and pre-render it on the server without using a store. asyncData is called every time before loading the page component. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method receives the context as the first argument, you can use it to fetch some data and Nuxt.js will merge it with the component data. Nuxt.js will automatically merge the returned object with the component data.
You do NOT have access of the component instance through this inside asyncData because it is called before initiating the component.
Nuxt.js offers you different ways to use asyncData. Choose the one you're the most familiar with:
Returning a Promise. Nuxt.js will wait for the promise to be resolved before rendering the component.
If you are using axios directly from node_modules and used the axios.interceptors add interceptors to transform the data, make sure create an instance before add interceptors. If not, when you refresh the serverRender page, the interceptors will be added multiple, that will cause data error.
import axios from 'axios'
const myaxios = axios.create({
// ...
})
myaxios.interceptors.response.use(function(response) {
return response.data
}, function(error) {
// ...
})
export default {
asyncData ({ params }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
}
export default {
async asyncData ({ params }) {
const { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
The result from asyncData will be merged with data. You can display the data inside your template like you're used to doing:
<template>
<h1>{{ title }}</h1>
</template>
When asyncData is called on server side, you have access to the req and res objects of the user request.
export default {
async asyncData ({ req, res }) {
// Please check if you are on the server side before
// using req and res
if (process.server) {
return { host: req.headers.host }
}
return {}
}
}
Accessing dynamic route data
You can use the context parameter to access dynamic route data as well! For example, dynamic route params can be retrieved using the name of the file or folder that configured it. If you've defined a file named _slug.vue in your pages folder, you can access the value via context.params.slug:
export default {
async asyncData ({ params }) {
const slug = params.slug // When calling /abc the slug will be "abc"
return { slug }
}
}
Listening to query changes
The asyncData method is not called on query string changes by default. If you want to change this behavior, for example when building a pagination component, you can set up parameters that should be listened to with the watchQuery property of your page component. Learn more on the API watchQuery page page. Nuxt.js adds the error(params) method in the context, which you can call to display the error page. params.statusCode will be also used to render the proper status code from the server-side.
export default {
asyncData ({ params, error }) {
return axios.get(`https://my-api/posts/${params.id}`)
.then((res) => {
return { title: res.data.title }
})
.catch((e) => {
error({ statusCode: 404, message: 'Post not found' })
})
}
}