Not SSG
Hello, I am creating a CMS project using nuxt3.
The problem I am having now is that it is not SSG even though I have set it up as follows.
When I update data from CMS on the screen that I have generated and previewed using npx, the data on the screen is updated.
Please help me.
nuxt.config.js export default defineNuxtConfig({ ssr: true, target: "static",
23 Replies
@8ear target: static does not exist in Nuxt 3
Alexander Lichter
YouTube
Nuxt Build or Nuxt Generate?
When creating a Nuxt application, it seems that there are two commands in your package.json to build your application for production:
nuxt build and nuxt generate. Some of you might wonder why there are two commands, what the difference of both are and when to use which one? And that's exactly what you'll find out in less than 15 minutes - i...@manniL / TheAlexLichter
Thank you for your reply. I immediately deleted target: "static", but the same problem occurs.
I watched the video, but it's a bit difficult for me... sorry.
Is there anything else I should look at or check?
What is difficult about it?
You need to use
nuxt generate for "full SSG" πI run pnpm generate and check the screen with pnpm preview at localhost:3000, but it doesn't become SSG and the API is called with the client.π
no no, don't use pnpm preview
just serve it with the command that is shown after
generate
(as I did in the video)Could you please tell me why you don't use pnpm preview? ?
How can I check the generated screen?
(I'm sorry if this is already explained in the video)
as I just said
^
npx serve (...) (on mobile, so can't c&p it directly but you get me)@manniL / TheAlexLichter
Sorry! I overlooked that command being displayed.
But the data was reflected immediately after all...
well, with full static you can only have data updates when you rebuild your app
@manniL / TheAlexLichter
That's right. I think it's correct that the data won't be updated and displayed unless you rebuild it.
This is how it's written to get the API, but is it wrong?
<script setup>
const { data: response } = await useFetch(
apipath,
{
credentials: "include",
}
);
</script>
<template>
{{ data }}
</template>It is!
That 's correct
I think the easiest would be a reproduction. I can't repro behavior where the API call is not persisted (in production/when serving the generate files) - except when the page wasn't generated
@manniL / TheAlexLichter
All pages are being generated.
However, the API is being called on the client side and this problem is not being solved, so I suspect there may be a problem with the way the API is being called.
When I looked into it, I found literature that said that useFetch doesn't work and that asyncData should be used, so I'm confused. Even when I rewrite the parts that use $fetch to asyncData, the root cause is not solved... (although I feel like the way asyncData is being used is not relevant to this case in the first place)
I don't know how to debug because generate completes without any errors.π
@8ear as mentioned, please provide a reproduction (see #Support Forum - Guidelines & Instructions )
@manniL / TheAlexLichter
Thank you for your kind reply.
I still haven't figured out how to reproduce the problem, but a project created in a similar way (using the same base nuxt.config.js settings and calling the API in the same way) works as expected.
By the way, here is the sample I created.
But I can't reproduce the problem with this one.
https://github.com/P0lar8ear/kuroco-nuxt
GitHub
GitHub - P0lar8ear/kuroco-nuxt
Contribute to P0lar8ear/kuroco-nuxt development by creating an account on GitHub.
The nuxt.config.js of the project where the problem is occurring is as follows.
if you can't repro it with this then neither I'll be I guess π
@manniL / TheAlexLichter
That's right.π
Thank you for listening to me so kindly.
I would really like to show you everything, but it's a work project so I can't.
I'll come back to you and ask for your help when I figure out how to reproduce it.
Thank you for your time!
I've subscribed to your YouTube channel!
I know the struggle π
No problem at all! I hope you'll figure out how to repro it π₯
And thanks for the sub π
This issue has been resolved.
It was caused by something written in $fetch.
The part where the API was retrieved with useFetch was SSG, and it seemed that the part written in $fetch was calling the API even though SSG was set.
I hope this can be of some help to anyone who is experiencing the same thing.
Thatβs correct. $fetch wonβt be persisted
@manniL / TheAlexLichter
But even if you use useFetch, it doesn't necessarily mean that it will become SSG.π
it does, when it is called at build time
which is guaranteed if you e.g. use it in a component on a page which is rendered/crawled
you can otherwise specify URLs you wanna crawl
but of course nuxt can't "magically know all possible combinations"