Understanding best practices for SSR + CMS setups

I'm familiar with using Nuxt 3 as a static site generator using nuxt content, but I'm currently building a site that will need to be SSR'd. I have a Strapi instance setup and ready to go, and now that I'm connecting it to the Nuxt, I'm having a hard time wrapping my head around best practices and how to set this up.

Here's an example page in my app:

<script setup lang="ts">
const { data } = await useFetch(process.env.NUXT_STRAPI_URL + '/api/blog-posts', {
  headers: {
    Authorization: 'Bearer ' + process.env.NUXT_STRAPI_TOKEN
  }
});
</script>

<template>
  <main>
    {{ data }}
  </main>
</template>

<script setup lang="ts">
const { data } = await useFetch(process.env.NUXT_STRAPI_URL + '/api/blog-posts', {
  headers: {
    Authorization: 'Bearer ' + process.env.NUXT_STRAPI_TOKEN
  }
});
</script>

<template>
  <main>
    {{ data }}
  </main>
</template>

My intention is that the data is fetched server side only, and is rendered on the page and delivered to the client. Looking through the docs for nuxt tells me that this request may also happen on the client? I guess I'm confused, but that should never happen in my ideal case. I also wasn't able to get this example working as the environment variable usage here wasn't available on the client, and causing issues. Do I wrap this in a conditional to ensure it only runs on the server? How, then, does the template access the data?

I'd appreciate any insight or direction on where I can look to get a clearer answer on these things, as I have yet to see a complete and simple example of this in practice that isn't totally bloated with other things going on. I also am aware the strapi has an official nuxt plugin, but I am avoiding using it as it comes opinionated with ways that authentication should work and it is not configurable enough for my use case.

<script setup lang="ts">
const { data } = await useFetch(process.env.NUXT_STRAPI_URL + '/api/blog-posts', {
  headers: {
    Authorization: 'Bearer ' + process.env.NUXT_STRAPI_TOKEN
  }
});
</script>

<template>
  <main>
    {{ data }}
  </main>
</template>

<script setup lang="ts">
const { data } = await useFetch(process.env.NUXT_STRAPI_URL + '/api/blog-posts', {
  headers: {
    Authorization: 'Bearer ' + process.env.NUXT_STRAPI_TOKEN
  }
});
</script>

<template>
  <main>
    {{ data }}
  </main>
</template>

Understanding best practices for SSR + CMS setups

Similar Threads

Understanding best practices for SSR + CMS setups

Similar Threads

Similar Threads

Similar Threads