Strapi and Next.js website experiencing issues with updating blog content

Question

Strapi and Next.js website experiencing issues with updating blog content

I currently have a Next.js application running in production that is powered by Strapi for content management. The content is fetched using the getStaticProps function on each of the two pages in my small blog.

However, I've noticed that when new content is created or existing content is updated, the Next.js app fails to fetch the latest changes. It seems like this might be happening because of the initial fetching at build time.

Is there a way to dynamically fetch content on the client side while still benefiting from SEO advantages? Any suggestions or ideas would be greatly appreciated!

Thank you in advance! :)

javascript next.js strapi

Answer 1

Answer №1

Thinking about implementing a revalidate strategy for Incremental Static Regeneration to update outdated content.

https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

// This function runs during the build phase on the server.
// It may run again, on a serverless function, if
// revalidation is enabled and a new request occurs
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will try to update the page:
    // - When a request is made
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

If this approach doesn't align with your content updating needs, you may need to switch to server-side rendering and fetching data per request.

Answer 2

Thinking about implementing a revalidate strategy for Incremental Static Regeneration to update outdated content.

https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

// This function runs during the build phase on the server.
// It may run again, on a serverless function, if
// revalidation is enabled and a new request occurs
export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
    // Next.js will try to update the page:
    // - When a request is made
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  }
}

If this approach doesn't align with your content updating needs, you may need to switch to server-side rendering and fetching data per request.

Strapi and Next.js website experiencing issues with updating blog content

Answer №1

Similar questions

Difficulty in implementing jQuery accordion height style using either content or fill option

There is no XHR request sent when invoking the http function

What is the process for appending a value to an array of JSON objects?

Checking for offline status in a Cordova app using Angular

Utilizing jQuery, Ajax, and PHP to Transfer Both FormData and String Data

Exploring Latitude, Longitude, and SVGs

Dealing with a multitude of redirects for dynamic pages that include optional slugs in Next.js

What is the best way to create an array containing dictionaries?

Transition smoothly between two images with CSS or jQuery

Test success despite Cypress assertion failing

List of duplicated BLE devices detected in network scanning

Difficulty in obtaining the child index upon clicking

How to insert a JSON object into a nested array using JavaScript

Significant delay in processing second jQuery Ajax call

Avoid using jQuery to trigger the .change event

Assign a value to a dropdownlist in Javascript

Angular $watch not working as expected

Retrieving items from an array based on their class association

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

Verify whether the division contains any elements and does not include specific elements