It sounds like you're experiencing an issue where navigating via NuxtLink triggers an additional API call, even though the page is server-rendered. This behavior can be attributed to how Nuxt handles client-side navigation versus server-side rendering.
When you navigate using NuxtLink, Nuxt performs client-side navigation, which means it fetches the data again on the client side. On the other hand, when you refresh the page or enter the URL directly, the page is server-rendered, and the data is fetched on the server side, which is why you don't see the additional API call.
To avoid this additional API call when navigating with NuxtLink, you can use the useAsyncData hook instead of useFetch. The useAsyncData hook is designed to work seamlessly with both server-side rendering and client-side navigation, ensuring that data is fetched only once.
Here's an example of how you can refactor your code to use useAsyncData:
// pages/movie/_id.vue
<template>
<div>
<h1>{{ movie.title }}</h1>
<p>{{ movie.description }}</p>
</div>
</template>
<script setup>
import { useAsyncData } from 'nuxt/app'
import { useRoute } from 'vue-router'
const route = useRoute()
const { data: movie } = await useAsyncData('movie', () => {
return $fetch(`/api/movies/${route.params.id}`)
})
</script>
In this example, useAsyncData is used to fetch the movie details. This ensures that the data is fetched only once, regardless of whether the page is server-rendered or navigated to via NuxtLink.
Additionally, make sure that your API endpoint is properly set up to handle the request and return the necessary data.
By using useAsyncData, you should be able to avoid the additional API call when navigating with NuxtLink, while still benefiting from server-side rendering.
I hope this helps! If you have any further questions, feel free to ask.