When I click the nuxt js button the response appears - vue.js

Question

I want to hide the responses of a nuxt js project and post requests with SSR.
This is possible when the page first loads.
<template>
<p v-if="$fetchState.pending">Fetching mountains...</p>
<p v-else-if="$fetchState.error">An error occurred :(</p>
<div v-else>
<h1>Nuxt Mountains</h1>
<ul>
<li v-for="mountain of mountains">{{ mountain.title }}</li>
</ul>
<b-btn #click="$fetch">Refresh</b-btn>
</div>
</template>
<script>
export default {
data() {
return {
mountains: []
}
},
async fetch() {
this.mountains = await fetch(
'https://api.nuxtjs.dev/mountains'
).then(res => res.json())
}
}
</script>
However, when the button is clicked, apiler appears in the browser network response.
when the page loads
Clicking the button

Answer 1

The reason the request doesn’t appear in the network tab on page load is because nuxt runs the fetch method on the server, and injects the response in to the page component before it loads. You want a button on that same page to fetch the data again, but you don’t want the data request to appear in the network tab?
If so, I think you’re going to have to refresh the page. That way, the fetch method runs again before the page loads, and your user won’t see the request, just like in a traditional SSR app. However this seems like an unusual use case for a Nuxt app!
Instead of:
<b-btn #click="$fetch">Refresh</b-btn>
Use:
<b-btn #click="this.$router.go()”>Refresh</b-btn>