prerender route fetch payload is not prerendered
(attached gif of refreshing the page CTRL+R)
page uri that im testing: /category/action?page=2
/category/[category].vue:
<script setup lang="ts">
const route = useRoute();
const { data, pending, error, refresh } = await useAsyncData(
"games:" + (route.params.category || "") + ":" + (route.query.page || 0),
() =>
$fetch("http://localhost:3001/games", {
query: {
page: route.query.page || 1,
category: route.params.category || null,
},
}),
);
const games = data;
</script>
nuxt.config.ts:
nitro: {
routeRules: {
"/category/action": { prerender: true },
"/category/action?page=1": { prerender: true },
"/category/action?page=2": { prerender: true },
},
},
problem: data is not prerendered as it changes after im on the site
how i run it: 'npm run generate' and then 'npm run preview'
during generation i get print:
├─ /category/action?page=1 (1494ms) (skipped) nitro 5:09:21 PM
├─ /category/action?page=2 (1531ms) (skipped) nitro 5:09:21 PM
1 Reply
same code does work as intended if i use page as a param (/category/[category]/[page]) instead of a query
/category/action/2 = works
/category/action?page=2 = does not work (as in a gif attached to original post)
is there a way to make it work with query ?