Mosayyeb
Mosayyeb
PostsComments
NNuxt
Created by Mosayyeb on 9/5/2024 in #❓・help
Private API to fetch data from server on page load or navigation without exposing api to the client
Hello, Is it possible to have a completely private API in Nuxt without exposing public server API? We have a page called example.vue and we want to load data from the server when the client navigates to the page for the first time. All fetching processes should be on the server side, and the private API should not be visible to the clients. 
<!-- pages/example.vue -->
<script setup>
// This should be called on the server side
const { data } = await useAsyncData(
  "theKey",
  () => $fetch("external api"), // This code should not be visible to clients
  {
    server: true, // Set to true but data won't load on navigation
  }
);
</script>

<template>
  <div>
    <!-- Do something with data on the client side -->
  </div>
</template>
<!-- pages/example.vue -->
<script setup>
// This should be called on the server side
const { data } = await useAsyncData(
  "theKey",
  () => $fetch("external api"), // This code should not be visible to clients
  {
    server: true, // Set to true but data won't load on navigation
  }
);
</script>

<template>
  <div>
    <!-- Do something with data on the client side -->
  </div>
</template>
we don't want to create server/api/get-data-from-external-api.ts because anyone can hit this endpoint. Any ideas?
3 replies