Nuxt fetch hook: why triggered both in server and in client?

This is essentially used for the isomorphic (aka Universal) app aspect. So, if you have ssr: true, this will help you for performance and SEO by generating the content ahead of time, hence on the server too.

It is done on both side because you need to have the same content on both Server and Client, otherwise there will be a DOM missmatch and the hydration will fail (implying a huge performance penalty!).

And target: static + ssr: true is a common combo, especially if hosting on Vercel/Netlify because it will provide performance, SEO and still all the benefits of an SPA.

If you use your Nuxt app as SPA only (ssr: false), the benefit is a bit less impressive but people usually come to Nuxt for it's SSR/SSG aspect.
But then, you're stuck waiting on your app while your whole SPA is doing it's thing and...you can say goodbye to SEO.

If you don't like it, you can always set fetchOnServer to false per component or in nuxt.config.js.
https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options

Lastly, when it says that this will be generated on both server and client, we do need to understand that the server is making the call:

• when we are generating the static content, this is not the case anymore after the initial hydration is complete
• once if target: server, once the JS is shipped to the browser, the SPA will handle the subsequent calls on client side

It's not like it'a huge waste and that the server is always doing the call for you on each client side navigation (MPA approach).

As a sidenote (using asyncData), when generating some pages from an API, you can use the already computed server payload and not have to fetch it on the client again. Useful for some purely static content like a blog!
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-generate#speeding-up-dynamic-route-generation-with-payload