Nuxt.js Fetching Data only on Server Side

Question

Is there any way to fetch data from an API only on Server-Side in NuxtJS since I will include my API_TOKEN in the headers of the request.

Example Code:

<template>
  <div>
    <h1>Data fetched using asyncData</h1>
    <ul>
      <li v-for="mountain in mountains" :key="mountain.title">
        <NuxtLink
          :to="{ name: 'mountains-slug', params: { slug: mountain.slug } }"
        >
          {{ mountain.title }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  async asyncData({ $http }) {
    const mountains = await $http.$get('https://api.nuxtjs.dev/mountains', {headers: "X-API-KEY: MY_API_TOKEN"})
    return { mountains }
  }
}
</script>

Answer 1

You cannot use private keys here because you will reach your server only once, then it will be used only on the client. Either use a middleware to hide the token or use a public one.

My other answer on this subject can be useful here.