Headless CMS + SSG


Do you also use static site generators? A general question about this:

I’ve added the Javascript Delivery SDK from Contentful - a headless CMS - to VuePress - a static site generator. I thought Contentful’s Content Delivery API is used once per build to build the site with the content I received from the API. But in the network section of the browser developer tools I see API requests even after the site has been deployed to Netlify/ is live.

Is that the way it should be?

Thank you very much for your help :blush:

We don’t pass judgment; you can of course use either pattern. The question is, what do you want to accomplish? You could either:

  • optimize for longer build times and instant loads, by preloading a snapshot of your Contentful data into the build and making sure no accesses to any Contentful-hosted URL come through in your site. This is my recommendation/best practice since then you are insulated from any downtime at Contentful, plus you know EXACTLY what you were serving at every moment from your Netlify hosted site - you can download a snapshot of it including that Contentful-content. Many folks who use this combination use a webhook from Contentful on certain update types (article is published; already-published article is edited) to trigger a Netlify rebuild so that it is always up to date with published content (trailing by the amount of time it takes to build your site).

  • optimize for shorter build times and a potential for real-time updates based on your content edits at Contentful, without triggering a Netlify rebuild unless there is a code change. This is the “default” setup since we are only notified by your git provider of code changes, and most folks don’t pull their Contentful data into their git repository (though if you do, we’ll build after that commit as well).

Thank you for your answer @fool :pray:


preloading a snapshot of your Contentful data into the build and making sure no accesses to any Contentful-hosted URL come through in your site

Interesting… How does it work? Any more information somewhere?

This proposal goes beyond pre-rendering, as it is described from Google Web (please see below), doesn’t it? :thinking:

By the way, this and the stuff below (second sentence in the first paragraph) explain why I see the API requests after the initial load I think.

Each page generated by VuePress has its own pre-rendered static HTML, providing great loading performance and is SEO-friendly. Once the page is loaded, however, Vue takes over the static content and turns it into a full Single-Page Application (SPA). Additional pages are fetched on demand as the user navigates around the site.

During the build, we create a server-rendered version of the app and render the corresponding HTML by virtually visiting each route. This approach is inspired by Nuxt’s nuxt generate command and other projects like Gatsby) .

I hope this will also help other members.

Thanks again & greetings from Germany :v: