0

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.com/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.

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.