topherlicious
topherlicious
PostsComments
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
Just to update for anyone that finds this later: The pattern I'm looking for is not a thing in Nuxt. If you want to force SSR for every page, you need to use SSG instead. I find it a bit odd that there's no standard accepted way to accomplish this, but I guess that just isn't Nuxt's thing. Instead, the pattern is to make an internal server route that then uses your API key to make another external request. More info and a solid example found here: https://github.com/nuxt/nuxt/discussions/20544#discussioncomment-5741868
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
Hmm okay, I think I also need to do some more reading myself if I'm not explaining myself clearly. I appreciate your help, thanks! Take care 👋
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
Just to think out loud, I can just allow requests to happen client side and use a whitelist on my CMS server. That would solve my concerns here. But I still really want to know the proper way to do this, I can't be the first person to want to accomplish something like this. I wonder if it's just something that isn't suited for the Nuxt way of doing things.
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
The next issue I'd need to solve is that the fetch does not occur when navigating to the page, only on a fresh load directly on that page.
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
I see, and why would I add that header?
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
Why do you want me to add a header to my request...? Setting watch to false seems like the opposite of what I'd want
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
Fair question, and SSG is what I'm used to. This website is going to have a blog managed by multiple users, and using Nuxt file-based SSG is not going to be a good choice in the long run I think.
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
This is my first time going for SSR so it is totally possible that this is just, not how things are done haha. I was hoping I could avoid client side requests to the CMS API altogether.
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
Thanks for the response. I mentioned in my first message that I am purposefully avoiding using the Nuxt Strapi module altogether. I would also just like to understand how this works without it. Strapi is not the only CMS out there, and I assume it MUST be possible to achieve what I'm looking to do... I have read the documentation that you have linked in pretty good detail but I'm still not understanding how to achieve my specific use case. This seems like it would be a common issue to solve with SSR. Make a fetch on the server, and then render the result. Unless I am just fundamentally misunderstanding how these things are built, that doesn't seem like an unusual setup?
19 replies
NNuxt
Created by topherlicious on 4/17/2024 in #❓・help
Understanding best practices for SSR + CMS setups
After some experimentation, it looks like this might accomplish what I'm after? 
<script setup lang="ts">
const blogs = useState('blogs', () => []);

if (process.server) {
  const { data } = await useFetch<any>(process.env.NUXT_STRAPI_URL + '/api/blog-posts', {
    headers: {
      Authorization: 'Bearer ' + process.env.NUXT_STRAPI_TOKEN
    }
  });

  blogs.value = data.value!.data;
}
</script>

<template>
  <main>
    count: {{ blogs.length }}
  </main>
</template>
<script setup lang="ts">
const blogs = useState('blogs', () => []);

if (process.server) {
  const { data } = await useFetch<any>(process.env.NUXT_STRAPI_URL + '/api/blog-posts', {
    headers: {
      Authorization: 'Bearer ' + process.env.NUXT_STRAPI_TOKEN
    }
  });

  blogs.value = data.value!.data;
}
</script>

<template>
  <main>
    count: {{ blogs.length }}
  </main>
</template>
But this does not seem like the right way to do this at all. Editing to say that this method indeed does not work during client navigation, but only on a full page load on this page specifically.
19 replies