How does data fetching work in Nuxt.js with SSR?

How does data fetching work in Nuxt.js with SSR?

In Nuxt.js, data fetching with SSR (Server-Side Rendering) is done using the asyncData method. This method allows you to fetch data before rendering the page, ensuring that the data is available when the page is served to the client.

Can you give me an example of using asyncData?

Sure! In your page component, you can define an asyncData method like this:

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

What happens if the data fetching fails?

If data fetching fails, Nuxt.js will handle the error gracefully. You can use a try-catch block in asyncData to manage errors and return a specific error state or redirect the user.

Is there a way to fetch data on the client side as well?

Yes, you can use the fetch hook for client-side data fetching. This method runs on the client after the initial page load, allowing you to fetch data dynamically.