1

I use NextJS and I'm trying to make a static site with Wordpress as a backend, I managed to deploy my site with GitLab which deploys to an FTP server.

My problem is that I have to rebuild each time to change the data

I don't want to use useEffect because it's not great for SEO, and I can't use getStaticProps with a NextJS 14 app

async function fetchData() {
  const res = await fetch("fetchUrl", {
    next: { revalidate: 60 }, // Revalidation ISR (par exemple, toutes les 60 secondes)
  });
  if (!res.ok) throw new Error("Failed to fetch posts");
  return res.json();
}

export default async function Home() {
  const data = await fetchData();

  return (
    <>
      <div className="bg-red-500">data wordpress and deploy ci/cd</div>
      <pre>{data.acf.titre}</pre>
    </>
  );
}

I would like my page to fetch by refreshing the deployed site in the correct way without affecting SEO or performance.

Improve this question

2 Answers 2

Reset to default
0

There might me two possible solutions for your problem: 1- Add a tag in fetch to re-validate path on specific operations ie. when you update your data call that particular tag to revalidate it. -> fetch(https://..., { next: { tags: ['collection'] } }) 2- By default NextJs 14 caches your fetch response, so you can make fetch request every time you hit the API. So disable cache by adding this. ->fetch(https://..., { cache: 'force-cache' | 'no-store' }) Source - https://nextjs.org/docs/app/api-reference/functions/fetch

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

2 Comments

force cache not work and no-store put old data I want to fetch a page and not posts and if I change my wordpress data it changes on the deployed site but I can't find any solution
@Ben Understood i have a idea but i dont know is its the best approach out there: use this to run a function on window reload-> window.onload = function() { yourFunctionToFetchData(); }; And then make this function in a another js/ts file which should be "client-side" and there define this function and make api request to fetch latest data. Let me know if any more doubts.
0

From next.js docs:

If you are not using any dynamic functions anywhere else in this route, it will be prerendered during next build to a static page. The data can then be updated using Incremental Static Regeneration.

Incremental Static Regeneration (ISR) enables you to:

  • Update static content without rebuilding the entire site
  • Reduce server load by serving prerendered, static pages for most requests
  • Ensure proper cache-control headers are automatically added to pages
  • Handle large amounts of content pages without long next build times

Example

interface Post {
  id: string
  title: string
  content: string
}
 
// Next.js will invalidate the cache when a
// request comes in, at most once every 60 seconds.
export const revalidate = 60
 
// We'll prerender only the params from `generateStaticParams` at build time.
// If a request comes in for a path that hasn't been generated,
// Next.js will server-render the page on-demand.
export const dynamicParams = true // or false, to 404 on unknown paths
 
export async function generateStaticParams() {
  let posts: Post[] = await fetch('https://api.vercel.app/blog').then((res) =>
    res.json()
  )
  return posts.map((post) => ({
    id: post.id,
  }))
}
 
export default async function Page({ params }: { params: { id: string } }) {
  let post = await fetch(`https://api.vercel.app/blog/${params.id}`).then(
    (res) => res.json()
  )
  return (
    <main>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </main>
  )
}

Here's how this example works:

  • During next build, all known blog posts are generated (there are 25 in this example)
  • All requests made to these pages (e.g. /blog/1) are cached and instantaneous
  • After 60 seconds has passed, the next request will still show the cached (stale) page
  • The cache is invalidated and a new version of the page begins generating in the background
  • Once generated successfully, Next.js will display and cache the updated page If /blog/26 is requested, Next.js will generated and cached this page on-demand

Edit

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}
 
// Three versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
// - /pages/1
// - /pages/2
// - /pages/3
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
  // ...
}
Improve this answer

6 Comments

how do I pass the data from my page id 2 to my home page because this is for posts and not page data? THANKS
What do you mean? You can use this example on your homepage
I don't want to map but retrieve the data from my wordpress from my page id 2 and not from the params
What's "page id 2"? You can edit the generateStaticParams to not map the response. It was just used as an example
page id 2 is my route for fetch myUrl/wp-json/wp/v2/pages/2 but Im not sure this solution is the better
|

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.