nuxt3.js - Generate dynamic routes not adding content to index.html file - Stack Overflow

admin管理员组

文章数量:1431413

Trying to generate a project with posts where data is fetched from an api. In nuxt.config I have the following settings: (edit: added interval and concurrency to prerender settings after reading about them. This seems to ensure that post content is currectly loaded from api into _payload.js in each post folder)

nitro: {
    //debug: true,
    prerender: {
      concurrency: 1,
      interval: 500,
      crawlLinks: true,
      failOnError: false,
      routes: routeList //import json file with simple array of post slugs
    },
  },
  generate: {
    routes: routeList
  }

Route list is a json file imported into nuxt.config:

[
    "/publications/publication-test-1-67362b0d001109163066",
    "/publications/publication-test-2-6737819600068bbec2e6",
    "/publications/une-autre-publication-673781e40032571df6c9"
]

My [single].vue file showing post content looks like this:

<template>

<client-only>
<div v-if = "pending" class="flex items-center justify-center bg-orange-300" style="height:95vh">Téléchargement...</div>
<div v-if = "post"><SharedSinglePage table="publications" :item="post" /></div>
</client-only>

</template>

<script setup>
defineI18nRoute({ paths: { fr: '/publications/[single]',  } })
const id = useRoute().params.single.split('-').pop()
const { data:post, pending } = await useFetch('/api/post', { method: 'post', body: {id:id} })

</script>

And the server route that gets the data is:

export default defineEventHandler(async (event) => {
    const api = ''
    const { id } = await readBody(event)
    const single = await $fetch( api, { method: 'POST', body: {query:'single', table:'publicposts', id: id, } })
    return single
})

Data is fetched fine when the project is running, but when I try to make a prod version with nuxt generate the routes look like they are being crawled but nitro either returns an error or makes a folder for each route with a _payload.js file and a index.html that does not show any post content.

On inspecting, each posts's index.html file has a script element, referencing its corresponding _payload.json file.

<script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/publications/publication-test-2-6737819600068bbec2e6/_payload.json">[{"state":1,"_errors":9,"serverRendered":12,"path":13,"pinia":14,"prerenderedAt":19},["Reactive",2],{"$sicons":3},{"ph:list-bold":4},{"left":5,"top":5,"width":6,"height":6,"rotate":5,"vFlip":7,"hFlip":7,"body":8},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M228 128a12 12 0 0 1-12 12H40a12 12 0 0 1 0-24h176a12 12 0 0 1 12 12M40 76h176a12 12 0 0 0 0-24H40a12 12 0 0 0 0 24m176 104H40a12 12 0 0 0 0 24h176a12 12 0 0 0 0-24\"/>",["Reactive",10],{"J7cm34QBuS":11},null,true,"/publications/publication-test-2-6737819600068bbec2e6",["Reactive",15],{"main":16,"auth":17},{"screen":5},{"user":7,"userId":18,"token":18},"",1732024175497]</script>

Is this normal behaviour ? Why is the content not showing up on the page ? Setting debug to true in Nitro settings does not offer any more info.

Thanks in advance for any pointers.

Trying to generate a project with posts where data is fetched from an api. In nuxt.config I have the following settings: (edit: added interval and concurrency to prerender settings after reading about them. This seems to ensure that post content is currectly loaded from api into _payload.js in each post folder)

nitro: {
    //debug: true,
    prerender: {
      concurrency: 1,
      interval: 500,
      crawlLinks: true,
      failOnError: false,
      routes: routeList //import json file with simple array of post slugs
    },
  },
  generate: {
    routes: routeList
  }

Route list is a json file imported into nuxt.config:

[
    "/publications/publication-test-1-67362b0d001109163066",
    "/publications/publication-test-2-6737819600068bbec2e6",
    "/publications/une-autre-publication-673781e40032571df6c9"
]

My [single].vue file showing post content looks like this:

<template>

<client-only>
<div v-if = "pending" class="flex items-center justify-center bg-orange-300" style="height:95vh">Téléchargement...</div>
<div v-if = "post"><SharedSinglePage table="publications" :item="post" /></div>
</client-only>

</template>

<script setup>
defineI18nRoute({ paths: { fr: '/publications/[single]',  } })
const id = useRoute().params.single.split('-').pop()
const { data:post, pending } = await useFetch('/api/post', { method: 'post', body: {id:id} })

</script>

And the server route that gets the data is:

export default defineEventHandler(async (event) => {
    const api = 'https://xxx.execute-api.eu-central-1.amazonaws/dev/events'
    const { id } = await readBody(event)
    const single = await $fetch( api, { method: 'POST', body: {query:'single', table:'publicposts', id: id, } })
    return single
})

Data is fetched fine when the project is running, but when I try to make a prod version with nuxt generate the routes look like they are being crawled but nitro either returns an error or makes a folder for each route with a _payload.js file and a index.html that does not show any post content.

On inspecting, each posts's index.html file has a script element, referencing its corresponding _payload.json file.

<script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/publications/publication-test-2-6737819600068bbec2e6/_payload.json">[{"state":1,"_errors":9,"serverRendered":12,"path":13,"pinia":14,"prerenderedAt":19},["Reactive",2],{"$sicons":3},{"ph:list-bold":4},{"left":5,"top":5,"width":6,"height":6,"rotate":5,"vFlip":7,"hFlip":7,"body":8},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M228 128a12 12 0 0 1-12 12H40a12 12 0 0 1 0-24h176a12 12 0 0 1 12 12M40 76h176a12 12 0 0 0 0-24H40a12 12 0 0 0 0 24m176 104H40a12 12 0 0 0 0 24h176a12 12 0 0 0 0-24\"/>",["Reactive",10],{"J7cm34QBuS":11},null,true,"/publications/publication-test-2-6737819600068bbec2e6",["Reactive",15],{"main":16,"auth":17},{"screen":5},{"user":7,"userId":18,"token":18},"",1732024175497]</script>

Is this normal behaviour ? Why is the content not showing up on the page ? Setting debug to true in Nitro settings does not offer any more info.

Thanks in advance for any pointers.

• nuxt3.js

Share Improve this question Follow edited Nov 19, 2024 at 14:15 DarkBee 15.5k88 gold badges7272 silver badges118118 bronze badges asked Nov 19, 2024 at 13:08 martinvalmartinval 53211 gold badge55 silver badges2323 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

My bad....Nitro was throwing errors because a child component made a reference to 'window', which is not present on the server. And the content was not rendered on the server because my entire code was wrapped in

Fixing these 2 things made it all work.

本文标签： nuxt3jsGenerate dynamic routes not adding content to indexhtml fileStack Overflow