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.
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
2
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
// ...
}
6