Access private data ( run time config) in client also fetch data in server side using useFetch in nuxt 3

Question

Issue with useFetch in Nuxt 3 for static generation

Hi everyone,

My name is Wisely, and I'm currently facing an issue while using useFetch in Nuxt 3 for static generation. I have configured useFetch to access public runtime config in the Nuxt config, but this exposes the environment files on the client side.

I'm wondering if there's a way to access private runtime config on the client side in Nuxt. Alternatively, is there a method to use useFetch to fetch data on the server, and then on the client, only display the data generated during the static generation?

Below is a snippet of my code. Can anyone spot where I might be going wrong?

if (process.server) {
  const { data: article } = await useFetch(endpoint, {
    headers: {
      Id: runTimeConfig.public.APP_ID,
      Secret: runTimeConfig.public.APP_SECRET,
      partner: runTimeConfig.public.PARTNER,
    },
  });

  nuxtApp.payload.data = article.value;
  artikelData = ref(nuxtApp.payload.data);
} else {
  artikelData = nuxtApp.payload.data;
}