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>
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.