How can I fetch data in Nuxt.js using SSR?

How can I fetch data in Nuxt.js using SSR?

In Nuxt.js, you can fetch data using the asyncData method in your page components. This method is called before loading the component and allows you to fetch data from an API.

Can you show me an example of using asyncData?

Sure! Here's a simple example:

export default {
  async asyncData({ params }) {
    const response = await fetch(`https://api.example.com/data/${params.id}`);
    const data = await response.json();
    return { data };
  }
};

What if I need to handle errors while fetching data?

You can use a try-catch block within the asyncData method to handle errors. For example:

export default {
  async asyncData({ params }) {
    try {
      const response = await fetch(`https://api.example.com/data/${params.id}`);
      if (!response.ok) throw new Error('Network response was not ok');
      const data = await response.json();
      return { data };
    } catch (error) {
      console.error(error);
      return { data: null, error: 'Failed to fetch data' };
    }
  }
};

Can I use Axios instead of fetch?

Yes, you can use Axios for data fetching in Nuxt.js. You would need to install Axios and then use it in the asyncData method similarly.