Search code examples
vue.jscontentfulnuxt.jsheadless-cms

Headless CMS and static pages? Content updates?


I am trying to use my first Headless CMS and I've tried both Prismic.io and Contentful.

For instance, this is the code from Contentful guide:

  asyncData({ env }) {
return Promise.all([
  // fetch the owner of the blog
  client.getEntries({
    'sys.id': env.CTF_PERSON_ID
  }),
  // fetch all blog posts sorted by creation date
  client.getEntries({
    content_type: env.CTF_BLOG_POST_TYPE_ID,
    order: '-sys.createdAt'
  })
])
  .then(([entries, posts]) => {
    // return data that should be available
    // in the template
    return {
      person: entries.items[0],
      posts: posts.items
    }
  })
  .catch(console.error)
}

This works fine and I am able to fetch my blog posts in

      <article v-for="post in posts" :key="post">
    <h2>{{ post.fields.title }}</h2>
    <p>{{ post.fields.content }}</p>
  </article>

However, if I generate static pages with Nuxt, I understood the page will still load the latest version of the content from Contentful when live, while instead it just keeps the static content fetched on the pages when generated.

Am I missing the main point here?

Thanks


Solution

  • What you discovered is correct. Nuxt in its current version makes requests to the contentful API when new navigations occur. Afaik there are plans to write the data to disk during build time (e.g. Gatsby does it like that) but these are not implemented yet.

    Personally, I'm running my private blog on exactly this tech stack and there is a small time window where static pages and the dynamically loaded part are different. This wasn't a bit problem for me so far. I can understand though that this could cause troubles.